Практика на летних каникулах в веб-интерфейсе и серверной части development-notes

Практикуйтесь в веб-интерфейсной и серверной разработке во время летних каникул - заметки

2024-07-12

(В основном это интерфейсная разработка, а не серверная часть. Позвольте мне сначала представить проект, реализующий интерфейсную и серверную части)

1. Установите и запустите проект MoreMall.

1.Знакомство с проектом MoreMall

Фронтенд и бэкенд могут взаимодействовать друг с другом, фронтенд: клиент, бекенд: сервер, база данных может быть написана на mall.sql;

2. Настройка среды

1) Установите Node.js: Node.js — этоСреда выполнения JavaScript , для создания серверных приложений. Загрузите и установите соответствующую версию Node.js на официальном сайте [Node.js](https://nodejs.org/). Конфигурация среды node.js относительно сложна.

2) Установите MySQL
3) Установите зависимости: запустите `npm install` в корневом каталоге проекта, который будетФайл package.json устанавливает все зависимости, необходимые для проекта.

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

2. Создайте проект Vue.

1. Создайте проект с помощью Vue CLI.

1) Установите и создайте проект vue: создайте новую папку для размещения файла проекта — cmd в каталоге файлов — `vue create my-project`
2) Структура каталогов проекта: каталог src содержит подкаталоги, такие как компоненты и представления, которые используются для хранения компонентов и страниц.

3) в<template>Запись данных в скрипте
- **Определение данных**: в компоненте Vue` <script>`部分定义数据，通过`data`函数返回数据对象。
- **Отображение данных**: в компоненте Vue`<template> `Частичное использование интерполяционных выражений`{{ }}` или команду `v-bind` и т. д. для отображения данных.

Пример: компонент — foo.vue


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

3. Установите и используйте vue-router

Здесь показан маршрут тестирования проекта.

1. Установите vue-роутер

1) Установка: cmd в каталоге файлов проекта, куда вы хотите добавить эту вещь — `npm install vue-router`
2) Настройте маршрутизацию: настройте правила маршрутизации в `src/router/index.js`, чтобы сопоставить разные пути к разным компонентам.

Пример:

Код в файле src/router/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;

3) Используйте<router-link>и<router-view>
<router-link>: используется для создания навигационных ссылок, которые можно переключить на соответствующую страницу маршрутизации после нажатия.
<router-view>: используется для отображения совпадающих компонентов маршрутизации.

Пример: 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>

Отображение страницы: (обратите внимание на номер порта)

Щелкните панель: Тогда почему мой номер порта называется «/bar»?

Потому что вы помните, где настроен маршрутизатор, а именно путь. Имя здесь можно выбрать случайно, но обычно оно соответствует имени компонента, и имя компонента не может быть изменено, а соответствующее имя — компонент-xx.vue. .

Зачем кликать, чтобы прыгать - из-за этого<router-link> ,и<router-view> Конкретная функция на странице будет обсуждаться позже.

4. Создайте первый апплет «Элемент плюс»

1. Используйте маршрутизатор+элемент-плюс, указанный выше.

element-plus можно понимать как серию упакованных пакетов для рендеринга клиентских страниц (универсальный пакет можно понимать так, программисты не программисты, мы всего лишь портеры пакетов)

2. Как использовать их код компонента

Нажмите на официальный сайтОбзор Обзор компонентов Element Plus (element-plus.org)

3.Установить элемент-плюс

1) Установка: cmd — `npm install element-plus` в файле проекта, который вы хотите использовать.
2) Представляем element-plus: представляем Element Plus и файлы стилей в `main.js`


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

3) Используйте компоненты: используйте компоненты пользовательского интерфейса Element Plus в компонентах Vue, например `<el-button> `,`<el-input> `Подожди.

Пример: App.vue, в любом случае, с<el->Начало


<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>

4) Объясните здесь<router-view> эффект:

Вы видите, куда пошла цифра 3 на рисунке выше после того, как я отрегулировал ее положение. Понимается как заполнитель.


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

4. Здесь также реализован переход по страницам, как

1) Конфигурация маршрутизации: настройте маршрутизацию в `src/router/index.js`, каждый маршрут соответствует компоненту.

Пример: Кстати, если путь равен «/», это означает, что первой попавшейся страницей будет вот эта.

Кажется, там не указано, как запустить проект: cmd-npm run service в каталоге файлов проекта.


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) Навигационные ссылки: используйте `<router-link> `Создайте навигационную ссылку, щелкните ее, чтобы перейти на соответствующую страницу, используйте`<router-view> `Показать компоненты маршрутизации.


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

5. Совместное использование Vue-router, element-plus и axios.

1. Установите аксиомы

1) То же, что и выше, команда установки: `npm install axios`
2) Настройте axios: настройте экземпляр axios в `main.js`, установите базовый URL-адрес по умолчанию и другие глобальные конфигурации.

2. Внедрение интерфейсных и серверных мини-программ.

- **Интерфейс определения**: определите интерфейс API на стороне сервера, обработайте внешний запрос и верните данные.
- **Данные внешнего запроса**: используйте axios во внешнем компоненте, чтобы отправить запрос, получить данные и отобразить их на странице.
- **Динамическое переключение данных**: объедините компоненты Element Plus и Vue Router, чтобы реализовать динамическое переключение данных меню, например отображение различного контента в соответствии с разными пунктами меню.

Конкретные шаги:
1) Создайте экземпляр axios и настройте:


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 в компоненте Vue для отправки запроса:


<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) Объедините Element Plus и Vue Router для реализации динамического меню: как объяснялось ранее.

3.Что делает аксиос?

Axios — это HTTP-клиент на основе Promise для HTTP-запросов в браузерах и средах Node.js. Это позволяет удобнее отправлять асинхронные запросы и обрабатывать данные ответа. В проекте Vue.js вы можете использовать Axios для взаимодействия с серверным API, например для получения данных, отправки данных формы, обработки загрузки файлов и других операций. axios предоставляет простой API, который поддерживает перехватчики запросов и ответов, отмену запросов, глобальную настройку и другие функции, что делает взаимодействие данных между внешними и внутренними частями более эффективным и контролируемым.

1) Сначала добавьте src/server/index.js на основе предыдущего проекта следующим образом:


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}`);  
});

Описание этого кода:

В этом фрагменте кода используется Node.js и платформа Express для создания простого сервера. Вот построчное объяснение кода:

1. **Импортируйте модуль Express и создайте экземпляр приложения**:
```javascript
const express = require('express');
константа приложение = экспресс();
```

— «express» — это фреймворк для создания веб-приложений. Здесь он импортируется через `require('express')`, а экземпляр приложения создается через `express()`.

2. **Установите порт прослушивания сервера**:
```javascript
const port = 3000 // Вы можете выбрать любой незанятый порт
```

- Переменная `port` определяет номер порта, который прослушивает сервер, здесь он установлен на `3000`.

3. **Настройки промежуточного программного обеспечения, разрешающие междоменные запросы**:
```javascript
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
следующий();
});
```

— Этот код настраивает промежуточное программное обеспечение для разрешения запросов между источниками (CORS). Он разрешает запросы из любого источника и разрешает определенные поля заголовка. Функция next() гарантирует, что запрос продолжится до следующего промежуточного программного обеспечения или обработчика маршрута.

4. **Определите маршруты и ответы**:
```javascript
app.get('/', (req, res) => {
//Создаем объект, содержащий данные, которые вы хотите вернуть
константные данные = [
{ id: 1, имя: 'Алиса', возраст: 18, email: '[email protected]' },
{ id: 2, имя: 'Боб', возраст: 19, email: '[email protected]' },
// ...больше пользователей
];

// Используйте метод res.json() для отправки ответа JSON
res.json(данные);
});
```

- `app.get('/', ...)` определяет маршрут для запросов GET. Когда клиент обращается к корневому пути `/`, будет вызываться эта функция-обработчик.
- Функция-обработчик создает объект data, содержащий пользовательские данные, и возвращает его клиенту в виде ответа JSON с использованием res.json(data).

5. **Запустите сервер**:
```javascript
приложение.listen(порт, () => {
console.log(`Сервер работает на http://localhost:${port}`);
});
```

- `app.listen(port, ...)` запускает сервер и позволяет ему прослушивать определенный порт.
- При успешном запуске сервера на консоль выводится сообщение, указывающее, что сервер запущен и доступен через `http://localhost:3000`.

Описание: Этот фрагмент кода создает простой сервер Express, который отвечает на запросы GET к корневому пути `/` и возвращает ответ JSON, содержащий пользовательские данные. Промежуточное программное обеспечение также настроено для разрешения междоменных запросов. Запустив этот сервер на порту 3000, вы можете использовать браузер или другой HTTP-клиент для доступа к http://localhost:3000 и просмотра возвращаемых данных JSON.

2) Бежать

cmd — узел index.js в каталоге файлов сервера.

Можно увидеть фоновые данные

Затем запустите cmd-npm run submit в каталоге файлов проекта, и вы увидите, что данные есть! !

Как управлять внутренними данными?

Просто в недавно добавленном файле server/index.js:


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

На базе шестерки и пятерки плюс бэкенд

Как запустить пять проектов вместе с серверной частью первого проекта MoreMall — объединить переднюю и внутреннюю части.

1. Подготовьте две вещи

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)сервер

Поместите его в файл scr, но его также можно распараллелить. Я раньше его отпустил и не удалял. В любом случае, npm run service возможен и в разных каталогах файлов.

Два файла под сервером:

(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

проиллюстрировать:

Цель этого кода — использовать Node.js и модуль mysql для создания пула подключений к базе данных MySQL и его экспорта для использования в других модулях.

Конкретное объяснение заключается в следующем:

1. **Импортируйте модуль mysql**:
```javascript
пусть mysql = require('mysql');
```
Эта строка кода импортирует модуль mysql — библиотеку Node.js, используемую для подключения к базам данных MySQL и работы с ними.

2. **Создайте пул соединений**:
```javascript
пусть db = mysql.createPool({
хост: '127.0.0.1',
пользователь: 'root',
порт: '3306',
пароль: «root»,
база данных: 'тест'
});
```
Этот код создает пул соединений, используя метод mysql.createPool. Пул соединений — это набор подключений к базе данных, которые могут совместно использоваться и повторно использоваться несколькими клиентами. Создание пула соединений может повысить производительность, поскольку позволяет избежать повторного установления соединения с базой данных при каждом запросе.

- `host: '127.0.0.1'`: адрес хоста сервера базы данных. Это локальный сервер.
- `user: 'root'`: имя пользователя базы данных.
- `port: '3306'`: номер порта базы данных. Порт по умолчанию для MySQL — 3306.
- `пароль: 'root'`: пароль базы данных.
- `database: 'test'`: имя подключаемой базы данных.

3. **Экспортировать пул соединений**:
```javascript
модуль.экспорты = db;
```
Эта строка кода экспортирует объект пула соединений `db`, чтобы другие модули могли импортировать и использовать этот пул соединений с помощью метода `require`.

Используя этот пул соединений, вы можете внедрить его в другие модули и использовать для выполнения запросов к базе данных. Например:

```javascript
//Вводим пул соединений с базой данных
const db = require('./путь/к/этому/модулю');

//Выполняем запрос к базе данных
db.query('SELECT * FROM user', (err, results) => {
если (ошибка) {
console.error('Ошибка выполнения запроса:', err);
возвращаться;
}
console.log('Результаты запроса:', results);
});
```

Этот метод упрощает управление подключениями к базе данных и их использование, особенно в приложениях, требующих частого доступа к базе данных.

(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. Дополнить знания новичков

Если не понятно, читайте дальше:/

Сервис-Терминал：

Создайте сервер Express и настройте пул подключений к базе данных.
Настройте промежуточное программное обеспечение, позволяющее выполнять междоменные запросы.
Определите маршрут GET для запроса базы данных и возврата данных.

клиент：

Используйте Axios для отправки HTTP-запросов на сервер в компоненте Vue.
Получите данные и отобразите их на странице.

«Используя этот пул соединений, вы можете внедрить его в другие модули и использовать для выполнения запросов к базе данных». — Какие еще модули?

Это серверный код на сервере.

В этом контексте «другие модули» обычно относятся к другим файлам JavaScript в вашем проекте Node.js, а не к файлу `.vue` компонента Vue. В частности, эти другие модули обычно представляют собой серверный код, который обрабатывает HTTP-запросы и взаимодействие с базой данных.

Типичная структура проекта может выглядеть так:

```
проект/
├── сервер/
│ ├── db.js // Предоставленный вами код пула соединений с базой данных
│ ├── Routes.js // Модуль, определяющий маршрутизацию API
│ └── server.js // Файл, который запускает сервер, здесь я имею в виду
└── клиент/
├── источник/
│ ├── компоненты/
│ │ ├── YourComponent.vue // Ваш компонент Vue
│ ├── main.js // Файл записи проекта Vue
│ └── ... // Другие файлы внешнего интерфейса
└── пакет.json
```

В этой структуре папка `server/` содержит серверный код, а папка `client/` содержит код Vue внешнего интерфейса.

### Пример: использование пула подключений к базе данных на стороне сервера

Предполагая, что у вас уже есть файл server/db.js, определяющий пул соединений с базой данных, вы можете добавить и использовать его в файле server/routes.js:

```javascript
// сервер/маршруты.js
const express = require('express');
const db = require('./db'); //Вводим пул подключений к базе данных

const router = express.Router();//Мне этот раздел routers.js не нужен. Остальные части собраны в index.js, и вместе мы реализуем «представление междоменных настроек пула подключений к базе данных». в соответствии с потребностями "Доступ? -Установить маршрутизацию-(конечная цель) запустить сервер"

//Определяем пример маршрута
маршрутизатор.get('/users', (req, res) => {
db.query('SELECT * FROM user', (err, results) => {
если (ошибка) {
вернуть res.status(500).json({ error: err.message });
}
res.json(результаты);
});
});

модуль.экспорт = маршрутизатор;
```

Затем настройте и запустите сервер Express в файле server/server.js и используйте определенные маршруты:

```javascript
// сервер/сервер.js
const express = require('express');
константа приложение = экспресс();
const маршруты = require('./routes'); //Введение определенных маршрутов

app.use('/api', маршруты); // Используем маршрутизацию;

константный порт = 3000;
приложение.listen(порт, () => {
console.log(`Сервер работает на http://localhost:${port}`);
});
```

### Использование API в компонентах Vue

В вашем компоненте Vue вы можете использовать Axios для отправки HTTP-запросов к API, определенному выше:

```vue
<template>
<div>
<h2>Пользователи</h2>
<ul>
<li v-for="user in users" :key="user.id">
{{ имя пользователя }} - {{пользователь.email}}
</li>
</ul>
</div>
</template>

<script>
импортировать axios из 'axios';

экспорт по умолчанию {
данные() {
возвращаться {
пользователи: []
};
},
смонтировано() {
axios.get('http://localhost:3000/api/users')
.тогда(ответ => {
this.users = response.data;
})
.поймать(ошибка => {
console.error('Ошибка при получении пользователей:', error);
});
}
};
</script>
```

Таким образом, разделив логику внешнего и внутреннего интерфейса, вы сможете лучше организовать код и управлять им, гарантируя при этом, что серверная часть обрабатывает взаимодействие с базой данных, а внешний интерфейс обрабатывает сбор и отображение данных через API.

3.

1) Сервер должен слушать! ! Только при мониторинге можно запустить проект и увидеть фоновые данные. Всего лишь следующие шаги:

Команда Project/src/sserver/——cmd——node index.js, начать просмотр

Правильный мониторинг показывает:

Во-вторых, я обнаружил, что могу использоватьhttp://localhost:3000/api/usersЯ вижу правильные данные JSON, но не могу использовать http://localhost:3000. Решение следующее:

Измените 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. Как добавить страницу входа

Сначала добавьте в папку assets: img — изображение страницы, на которую был выполнен вход в начале, и папку css

Затем добавьте Login.vue, маршрутизатор входа в систему.

Последний шаг — настроить предыдущую страницу, отделить App.vue (всего), инкапсулировать его, нарисовать рамку в левой части страницы, чтобы создать отдельный Bar.vue, а затем, если вы хотите видеть эту панель на каждом страницу, вам нужно добавить ее на каждую страницу. Добавьте ссылку на Bar.vue в файл .vue.