Vacationes aestivas praxim interretialem ante-finem et exitum evolutionis-ultimi notae

Exercere interretialem ante-finem et finem evolutionis in aestivis vacationibus - notis

2024-07-12

(Maxime ante-finem progressionis, non fine posteriori. Fac me primum inducere consilium instrumentum ante-finem et finem retro)

1. Install ac currunt project MoreMall

1.Introduction ad project MoreMall

Ante-finis et posterior finis inter se inter se cohaerent, ante-finem: client, posteriori-end: server;

2.Environment setup

1) Instrue Node.js: Node.js est aJavaScript runtime environment ad aedificandas applicationes servo laterali. Download and install the appropriate version of Node.js in rutrum [Node.js](https://nodejs.org/). Ambitus conformatio nodi.js complexus est relative.

II) install mysql
3) clientelas instrue: Curre `npm install` in indice radicis propositi, quod eritFasciculus `package.json` installat omnes clientelas ad res quae requiruntur.

（MySQL）：https://blog.csdn.net/chuci0910/article/details/138770174
NodeJs）：https://zhuanlan.zhihu.com/p/686043568

2. crea in Vue project

1. crea in project per Vue CLI

1) Instrue et crea project vue: novum folder ut lima exertus - cmd in indice tabella - `vue creare meum-project`
2) Directorium Project structura: `src` directorium subdirectorias continet ut `components` et `sententias`, quae ad componentes et paginas reponunt.

3) in*<template>Scribere data in scriptor
- **Define data**: in Vue component` <script>`部分定义数据，通过`data`函数返回数据对象。
- **Display data**: in Vue component`<template> Usus partialis interpolationis expressions`{{ }}` vel mandare `v-bind` etc. ad ostentationem data.

Exemplum: component-foo.vue


<template>
	<div>{{msg}}</div>
</template>
 
<script>
export default{
	name:'foo',
	data(){
		return{
			msg:'foo page'
		}
	}
}
</script>
 
<style>
</style>

3. Install ac uti vue-iter

Ostensum est hic documentum routetest

1. Install vue-iter

1) Installation: cmd sub indicis documenti documenti ubi hanc rem addere vis - `npm vue-router` install
2) Configure fundere: Configure fundere praecepta in `src/router/index.js` ad describendas vias diversas ad diversas partes.

Exemplum:

Codex in fasciculo src/iter/index.js:


import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue'; // 示例组件路径，请根据实际情况调整
import Bar from '../components/Bar.vue'; // 示例组件路径，请根据实际情况调整
import Foo from '../components/Foo.vue'; // 示例组件路径，请根据实际情况调整
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/bar',
    name: 'Bar',
    component: Bar
  },
  {
    path: '/foo',
    name: 'Foo',
    component: Foo
  }
  // 其他路由配置
];
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});
 
export default router;

III) usus<router-link>et<router-view>
<router-link>: navigationis nexus creandi usi sunt, qui ad paginas strepitando aptandas impelli possunt.
<router-view>: ostentare solebat excitandas partes matched.

Exemplum: App.vue:


<template>
  <div id="app">
      <router-link to="/bar">Bar</router-link>|
      <router-link to="/foo">Foo</router-link>  
    <router-view></router-view> <!-- 确保包含这个标签 -->
  </div>
</template>

Page ostentationem: (portum numerus attende)

Preme talea: Cur ergo numerus portus meus appellatur '/bar'?

Quia meministi ubi configuratur iter, quod est via. .

Cur click ut salire - ob id<router-link> ,et<router-view> Munus specifica in pagina postea dicetur.

4. Fac primum elementum plus applet

1. utere iter + elementum plus supra

element-plus intelligi potest series fasciculorum sarcinatorum pro pagina ante-finem reddens (involucrum universale hoc modo intelligi potest, programmatores programmatores non sunt, ianitores sarcinae iusti sumus)

2. Quomodo uti eorum pars codice

Click in rutrumOverview Component Overview | .

3.Install elementum plus

1) Installation: cmd-`npm elementum plus` institue-in fasciculo documenti uti vis.
2) Introducere elementum-plus: elementum plus quam style lima in `main.js` . produc


import ElementPlus from 'element-plus'//引入elementplus
import 'element-plus/dist/index.css'//引入elementplus样式文件

3) Utere componentibus: Elementum Plus UI utere componentibus in Vue partibus, ut `<el-button> `, `<el-input> `Exspecta.

Exemplum: App.vue, usquam, cum<el->Initium est


<template>
  <el-container class="layout-container-demo" style="height: 500px">
      <el-aside width="200px">
        <el-scrollbar>
          <el-menu :default-openeds="['1', '3']">
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Message /></el-icon>Navigator One
              </template>
              <el-menu-item-group>
                <template #title>Group 1</template>
                <el-menu-item index="1-1">
					<router-link to="/optionOne">Option 1</router-link>
				</el-menu-item>
                <el-menu-item index="1-2">
					<router-link to="/optionTwo">Option 2</router-link>
				</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group 2">
                <el-menu-item index="1-3">
					<router-link to="/optionThree">Option 3</router-link>
				</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="1-4">
                <template #title>Option4</template>
                <el-menu-item index="1-4-1">Option 4-1
					<router-link to="/optionFour">Option4</router-link>
				</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><icon-menu /></el-icon>Navigator Two
              </template>
              <el-menu-item-group>
                <template #title>Group 1</template>
                <el-menu-item index="2-1">Option 1</el-menu-item>
                <el-menu-item index="2-2">Option 2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group 2">
                <el-menu-item index="2-3">Option 3</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="2-4">
                <template #title>Option 4</template>
                <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><setting /></el-icon>Navigator Three
              </template>
              <el-menu-item-group>
                <template #title>Group 1</template>
                <el-menu-item index="3-1">Option 1</el-menu-item>
                <el-menu-item index="3-2">Option 2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group 2">
                <el-menu-item index="3-3">Option 3</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="3-4">
                <template #title>Option 4</template>
                <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
  
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <div class="toolbar">
            <el-dropdown>
              <el-icon style="margin-right: 8px; margin-top: 1px">
                <setting />
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>View</el-dropdown-item>
                  <el-dropdown-item>Add</el-dropdown-item>
                  <el-dropdown-item>Delete</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span>Tom</span>
          </div>
        </el-header>
  
        <el-main>
          <el-scrollbar>
            <router-view></router-view>
          </el-scrollbar>
        </el-main>
		
      </el-container>
    </el-container>
</template>

IV) Explica hic<router-view> effectus;

Vides ubi '3' in imagine supra ivimus postquam positionem ejus accommodavi. Intellectus placeholder.


        <el-main>
          <el-scrollbar>
            
          </el-scrollbar>
        </el-main>
		
      </el-container>
    </el-container>
	<router-view></router-view>
</template>

4. Page jump hic quoque impletur, quomodo

1) Configuratione routing: Configure fundere in `src/iter/index.js`, unaquaeque via respondet componenti.

Exemplum: Viam, si semita est '/', significat primam paginam quae in hoc est.

Non videtur dicere quomodo project: cmd-npm currere serve in directorio documenti documenti


import{createRouter,createWebHistory} from 'vue-router';//导入外部组件，声明vue路由
import HelloWorld from '../components/HelloWorld.vue';
import OptionOne from '../components/OptionOne.vue';
import OptionTwo from '../components/OptionTwo.vue';
import OptionThree from '../components/OptionThree.vue';
import OptionFour from '../components/OptionFour.vue';
 
const routes=[//路由器配置
	{
		path:'/',//这样的话就最先进入的是helloworld页面了
		name:'HelloWorld',
		component:HelloWorld
	},
	{
		path:'/optionOne',
		name:'OptionOne',
		component:OptionOne
	},
	{
		path:'/optionTwo',
		name:'OptionTwo',
		component:OptionTwo
	},
	{
		path:'/optionThree',
		name:'OptionThree',
		component:OptionThree
	},
	{
		path:'/optionFour',
		name:'OptionFour',
		component:OptionFour
	}
];
 
const router=createRouter({
	history: createWebHistory(process.env.Base_URL),
	routes
});
 
export default router;

2) Nexus navigationis: uti `<router-link> `Coniunctionem navigationis fac, preme illam ut salire ad paginam respondentem, use`<router-view> `Explica excitandis components.


<el-menu-item index="1-3">
      <router-link to="/optionThree">Option 3</router-link>  
</el-menu-item>

5. Usus coniunctus Vue-iter, elementum plus et axios

1. axios install

1) Idem ut supra, institutionem mandatum: `npm axios` . install
2) Axios configurare: Configure axios in `main.js', pone defaltam baseURL et alias figuras globales.

2. Implement ante-finem ac tergum-finis mini programs

- **Definitio interfaciei: Definire API interfaciei in servo lateris, processus frontis finis postulatio, et notitia reditus.
- Ante-finem datae petitionis **: Axios utere in parte anteriori-finis ut petitionem mittat, notitias obtineat et in pagina exhibeas.
- **Dynamica Data Switching**: Miscere Elementum Plus components et Vue Router ut animadverto dynamicam datam mutandi menu, ut propono diversas contentos secundum diversas tabulas.

Imprimis gradus:
I) axios crea instantia et configurare;


import axios from 'axios';  
// 创建一个 axios 实例  
const http = axios.create({  
  baseURL: 'http://localhost:3000/',  
  // 其他配置...  
});  
  
// 创建一个 Vue 应用  
const app = createApp(App);  
  
// 将 axios 实例添加到 Vue 应用的原型上  
app.config.globalProperties.$http = http;  
  
// 挂载 Vue 应用  
app.mount('#app');

2) Axios utere in Vue componente ad petitionem mittendi:


<script>
const tableData = [];
export default {
  name: 'HelloWorld',
  created() {
      this.getUserList();  
    }, 
    data() {  
        return {  
          // 假设我们从API获取的是一个用户列表  
          tableData
        };  
    }, 
    methods: {  
    getUserList() {
      this.$http.get('/').then(response => {  
            console.log(response.data)
            this.tableData = response.data; 
        })  
        .catch(error => {  
            console.log(error)  
        });  
    } 
    }
  
}
</script>

3) Miscere Elementum Plus et Vue Router ad tabulam dynamicam efficiendam: Ut antea dictum est.

3. axios quid facit?

Axios est promissio HTTP clientis pro petitionibus HTTP in navigatoribus et in ambitus Node.js. Permittit tibi postulationes asynchronas commodius mittere ac responsionis notitia processus. In project Vue.js, Axios uti potes ad communicandum cum API fine posteriori, ut obtinens notitias, mittens formas datas, fasciculos fasciculos processus, aliasque operationes. axios simplex API praebet, quod postulatio et responsio interceptoribus subsidia, postulationem tabularum, configurationem globalem et alia munera, data commercio inter frontem et retro finem efficiens efficacius et moderatior.

1) Primum addere src/server/index.js fundatur in priori consilio ut sequitur


const express = require('express');  
const app = express();  
const port = 3000; // 你可以选择任何未被占用的端口  
  
// 设置中间件以允许跨域请求（可选，根据你的需求）  
app.use((req, res, next) => {  
  res.header("Access-Control-Allow-Origin", "*");  
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");  
  next();  
});  
  
// 设置路由和响应  
app.get('/', (req, res) => {  
  // 创建一个对象，其中包含你想要返回的数据  
  const data = [  
  { id: 1, name: 'Alice', age:18, email: '[email protected]' },  
  { id: 2, name: 'Bob', age:19, email: '[email protected]' },  
  // ...更多用户  
  ];  
  
  // 使用res.json()方法发送JSON响应  
  res.json(data);  
});  
  
// 启动服务器  
app.listen(port, () => {  
  console.log(`Server is running on http://localhost:${port}`);  
});

Descriptio huius codicis:

Hoc codice PRAECISIO Node.js utitur et compage expressa ut servi simplex creet. Hic linea est explicatio codicis:

1. ** Express moduli et crea applicationem exempli importare **;
``javascript
const express = require('express');
const app = express();
```

- `express` est compages applicationum ad structuram interretialem. Hic importatur `per `exprimere') et applicatio instantia per `expressum' creata est.

2. ** Pone portum audire servo **;
``javascript
const port = 3000;
```

- Port` variabilis numerus portum definit quem ministrans auscultat, hic ad `3000` constituitur.

3. Middleware occasus qui crucis-domain petitiones admittunt;
``javascript
app.use((req, res, next) => {
res.header("Access-Control-Permitte Origin", "*");
res.header("Access-Control-Permitte Capitis", "Origini, X-Requisita Cum, Content-Type, Accipe");
deinde();
});
```

— Hoc signum mediiware ponit ut petitiones crucis originis (CORS). Petitiones ab omni origine concedit et certos titulos agros concedit. Munus `proxum' efficit ut petitio pergat ad tractatorem proximum seu meatus.

4. ** Definire vias et responsiones;
``javascript
app.get('/', (req, res) => {
// crea objectum continet in notitia vis redire
Const data = [
{ id: 1, nomen: 'Alicia', age:18, email: '[email protected]' },
{ id: 2, nomen: 'Bob', age:19, email: '[email protected]' },
// ... more users
];

// usus res.json () modum responsionis mittendi JSON
res.json(data);
});
```

- `app.get('/', ...) `iter definit petitiones GET. Cum client radix semita `/` accesserit, hoc munus tracto vocabitur.
- Tractus munus obiecti `data` continens notitia utentis creat et ad clientem redit ut responsio `res.json'.

5. Incipit servo**;
``javascript
app.listen(port, () => {
console.log( `Servus currit in http://localhost:${port}`);
});
```

- `app.listen(portum, ...)` servo incipit et in portu definito auscultat.
- Cum servo prospere incipit, nuntium ad consolatorium output est significans servo currit et per `http://localhost:3000` pervia esse.

Summarium: Hoc signum PRAECISIO simplex Express servo creat qui petitiones ad radicem viae `/` GET' respondet et reddit responsionem JSON continens notitia usoris. Medium etiam constituitur ut petitiones crucis-dominae permittant. Hoc servo currendo in portum `3000`, navigatro vel alio HTTP cliente uti potes ad accessum `http://localhost:3000`, et exploratum redditum JSON datae.

2) Curre

cmd-nodi index.js in calculonis servi file directory

Videre background notitia

Tunc currite cmd-npm currite serve in directorio documenti documenti, et videre potes quod data sit! !

Quomodo notitia tergum administrare?

Modo in novo addito servo/index.js tabella:


// 设置路由和响应  
app.get('/', (req, res) => {  
  // 创建一个对象，其中包含你想要返回的数据  
  const data = [  
  { id: 1, name: 'Alice', age:18, email: '[email protected]' },  
  { id: 2, name: 'Bob', age:19, email: '[email protected]' },  
  // ...更多用户  
  ];

Ex sex et quinque, plus in backend

Quomodo quinque incepta currere una cum in extremo primi propositi MoreMall est fronti et posteriori fines coniungere.

1. duo facite

1）mysql.sql


create database test;
use test;
CREATE TABLE user (  
    id INT AUTO_INCREMENT PRIMARY KEY,  
    name VARCHAR(255) NOT NULL, 
    password VARCHAR(255) NOT NULL,
    age VARCHAR(255) NOT NULL,
    email  VARCHAR(255) NOT NULL
);
INSERT INTO user (name, password,age,email) VALUES ('Bob', '123','23','[email protected]');
INSERT INTO user (name, password,age,email) VALUES ('Tom', '123','23','[email protected]');

2）servo

Sub lima pone, sed etiam parari potest. Praecedam eam quam ego non delevi. Alioqui, npm currendum inservire potest etiam in diversis directoriis fasciculi.

Duo files sub servo:

1）db.js


let mysql = require('mysql')
//配置链接数据库的参数
let db = mysql.createPool({
    host: '127.0.0.1',
    user: 'root',
	port:'3306',
    password: 'root',
    database: 'test'
})
 
module.exports = db

illustrare;

Propositum huius codicis est uti Node.js et `mysql` modulus ad nexum piscinae ad MySQL database creandum et ad usum in aliis modulis educendum.

Ratio certa est haec:

1. **Import `mysql` modulus;
``javascript
mysql = require('mysql');
```
Haec linea codicis importat modulum `mysql`, quod est Node.js bibliotheca ad coniungere et operari MySQL databases.

2. ** nexum piscinam crea **;
``javascript
sit db = mysql.createPool({
exercitum: '127.0.0.1';
user: 'radix';
portum: '3306';
tesserae: 'root';
database: 'test'
});
```
In hoc codice nexum piscinae modum `mysql.createPool` utens. Connexio piscina copia est nexus datorum qui a pluribus clientibus communicari et reddi possunt. Connexionem piscinam creare potest ad meliorem perfectionem faciendam quia vitat nexum datorum cum omni petitione restaurandum.

- `hospes:' 127.0.0.1': Oratio exercitus datorum. Hic est cultor loci.
- `usor: 'root'`: nomen usoris database.
- `portus: '3306'`: Portus numerus Lat. Portus pro MySQL default est MMMCCCVI.
- `password: 'root'`: tessera datorum.
- `database: 'test'`: Nomen datorum ad connexum.

3. Export nexum lacus;
``javascript
module.exports = db;
```
Haec linea codicis exportat nexum objecti piscinae `db` ut alii moduli importare possint et hac connexione uti piscinam per modum `require`.

Hoc nexu piscinam utens, eam in aliis modulis inducere potes et ea uti ad quaestiones datorum perficiendas. Exempli gratia:

``javascript
// produc database nexu piscinam
const db = require('./path/to/this/module');

// Exigite database query
db.query('SELECT * FROM user', (err, results) => {
if (errant) {
console.error('Error interrogationem implens:', err);
remittere;
}
console.log('Quaery results:', results);
});
```

Haec methodus facilem facit nexus datorum administrandi et utendi, praesertim in applicationibus quae frequentem aditum datorum requirunt.

2）index.js


const express = require('express');  
const app = express();  
const port = 3000; // 你可以选择任何未被占用的端口  
const db = require('./db')
 
// 设置中间件以允许跨域请求（可选，根据你的需求）  
app.use((req, res, next) => {  
  res.header("Access-Control-Allow-Origin", "*");  
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");  
  next();  
});  
 
//配置对外接口
app.get('/', (req, res) => {
  var sql = 'select * from user'
  db.query(sql, (err, data) => {
      if(err) {
          return res.send({
            status: 400,
            message: "查询失败"
          })
      } else{
        console.log('查询结果：', data)
		res.json(data); 
      }
  })
});
 
// 设置路由和响应  
/*
app.get('/', (req, res) => {  
  // 创建一个对象，其中包含你想要返回的数据  
  const data = [  
  { id: 1, name: 'Alice', age:18, email: '[email protected]' },  
  { id: 2, name: 'Bob', age:19, email: '[email protected]' },  
  // ...更多用户  
  ];  
  
  // 使用res.json()方法发送JSON响应  
  res.json(data);  
});  
*/
// 启动服务器  
app.listen(port, () => {  
  console.log(`Server is running on http://localhost:${port}`);  
});

2. Supplementum scientiarum novitiorum

Si non intelligis, tantum lege:/

Service-Terminal：

Express servo crea et nexum database in piscinam constitue.
Medium constitue quod petitiones crucis domain concedit.
Definire iter GET ad interrogationem datorum et datorum reditus.

clientis：

Axios utere ut petitiones HTTP servo in Vue componente mittat.
Accipe notitias et ostende in pagina.

"Hoc nexu piscinae utens, illud in aliis modulis introducere potes et ea uti ad quaestiones database praestandas".

In calculonis servi latus est.

In hoc contextu "aliorum modulorum" plerumque ad alias tabulas JavaScript in tuo Node.js propositis refertur, non intra ".vue` fasciculum Vue componentis. Speciatim, hi alii moduli de more signum lateris servientes sunt qui petitiones HTTP et interationes datorum tractant.

Typical Project structurae hoc spectare posset:

```
project/
servo/
db.js // The database iunctio pool code you provided
routes.js // Scheda quae definit API routing
server.js // Tabella quae incipit servo, quod hic respondeo
clientis /
src/
components/
YourComponent.vue // Your Vue component
main.js // Vue project entry file
... // Aliae ante-finem files
package.json
```

In hac structura, "servor/` folder in codice server lateralis continet, dum "cliens/` folder in fronte-finem Vue codicem continet.

### Exemplum: Utens database nexu piscinam in servo latus

Si iam habes fasciculum `server/db.js` qui nexum database definit piscinae, tum introducere potes et uti in `servo/routes.js` file:

``javascript
// server/routes.js
const express = require('express');
const db = require('./db');

iter itineris = express.Router();//non usum habeo ad hanc sectionem itineris.js. Ceterae partes in index.js collocantur, simulque cognoscimus "inducere nexum datorum pisciculorum transversis-domain occasus. secundum necessitates "Access? -Set routing- (finalem rem) servo satus"

// Definire exemplum route
router.get('/users', (req, res) => {
db.query('SELECT * FROM user', (err, results) => {
if (errant) {
return res.status(500).json({ error: err.message});
}
res.json(eventus);
});
});

module.exports = iter;
```

Tum erigat et incipiet server Express in file "server/server.js" et definitis itineribus utere:

``javascript
// server/server.js
const express = require('express');
const app = express();
= vias = require('./routes');

app.use('/api', viae);

const port = MMM;
app.listen(port, () => {
console.log( `Servus currit in http://localhost:${port}`);
});
```

### Using API in Vue components

In componentibus Vue tuis, Axios uti potes petitiones HTTP ad API supra definitas mittendas:

`vue
<template>
<div>
<h2>Users</h2>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} - {{ user.email }}
</li>
</ul>
</div>
</template>

<script>
axios importare ab 'axios';

export default {
data() {
revertere {
users: []
};
},
conscendit () {
axios.get('http://localhost:3000/api/users')
.then (responsio => {
this.users = response.data;
})
.catch (errorem => {
console.error('Error ducens users:', error);
});
}
};
</script>
```

Hoc modo, logica ante-finem et retro finem separando, codicem melius ordinare et regere potes, dum ministrans latus tractat interationes datorum, dum prior finis tractat notitias acquirendi et proponere per API.

3.

1) Servus audire debet! ! Solum cum magna vigilantia potes currere consilium et videre curriculum vitae. Mox vestigia sequentes:

Project/src/sserver/--cmd--node index.js imperium, incipit viewing

Recta magna ostendit:

Secundo, inveni me posse utihttp://localhost:3000/api/usersData recta JSON video, sed uti non potest http://localhost:3000. Solutio haec est:

Mutare optionOne.vue:


export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
   // axios.get('http://localhost:3000/api/users')//服务端的信息
	axios.get('http://localhost:3000')//服务端的信息
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.error('Error fetching users:', error);
      });
  }
};

4. Quam addere paginae login?

Primum, ad bonorum folder adde: img est pagina imago quae ab initio initium fuit et folder css

Deinde adde Login.vue, iter itineris Login

Ultimus gradus est paginam priorem accommodare, App.vue (total), encapsulare, retractum in paginae latere sinistro trahere ut separatum facias Bar.vue, deinde si vis videre hunc Bar in omnibus paginam, singulis paginis addere debes.