Vue.js + Node.js + Express + MySQL 案例: 创建 CRUD 应用之前端

Vue.js + Node.js + Express + MySQL 案例: 创建 CRUD 应用之前端

后端地址为：https://blog.csdn.net/renxingwu2008/article/details/123672189

1、创建前端工程

npm init vite@latest hr_client（项目名称）
vue（选择vue）
下一步

2、初始化并运行项目(注意：默认端口为：3000，这里要与后端端口有所区分)

cd hr_client
npm install
npm run dev

3、安装Element plus

npm install element-plus --save

• 全局引入

import { createApp } from 'vue'
import App from './App.vue'

// 全局引入Element plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 这里添加 .use(ElementPlus)
createApp(App).use(ElementPlus).mount('#app')

4、安装vue-router

npm install vue-router

• 全局引用

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 全局引用 vue-router
import router from './route'

// 这里添加 .use(router)
createApp(App).use(ElementPlus).use(router).mount('#app')

5、安装axios

npm install axios

6、工程目录src下创建http-common.js

import axios from 'axios'
export default axios.create({
  // 后端端口号调整为：9000
  baseURL: 'http://localhost:9000/api',
  headers: {
    'Content-type': 'application/json'
  }
})

7、创建vue文件

1. 修改工程目录下的App.vue内容，将其定为导航页；
2. 将工程目录下的components目录重命名为：views；
3. 同时在其目录下创建HR目录；
4. HR目录下创建Users目录；
5. Users目录下创建vue文件：UsersList.vue和AddUser.vue文件

8、配置路由

• 工程src目录下 创建route目录，目录中创建index.js

import { createWebHistory, createRouter } from "vue-router";
const routes =  [
  {
    path: "/",
    alias: "/users",
    name: "users",
    component: () => import("../views/HR/Users/UsersList.vue")
  },
  {
    path: '/add',
    name: 'add',
    component: () => import('../views/HR/Users/AddUser.vue')
  }
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

9、配置服务层

工程src目录下 创建services目录，目录中创建UserDataService.js

import http from '../http-common'
class UserDataService {
  // 获取全部用户
  getAll () {
    return http.get('/users')
  }
  // 根据ID获取指定用户信息
  get (id) {
    return http.get(`/users/${id}`)
  }
  // 创建一条用户记录
  create (data) {
    return http.post('/users', data)
  }
  // 更新一条用户记录
  update (id, data) {
    return http.put(`/users/${id}`, data)
  }
  // 删除指定ID用户记录
  delete (id) {
    return http.delete(`/users/${id}`)
  }
  // 删除所有用户记录（业务上估计用不上）
  deleteAll () {
    return http.delete('/users')
  }
  // 根据用户中文名称查找用户信息
  findByUserCN (userCN) {
    return http.get(`/users?userCN=${userCN}`)
  }
}
export default new UserDataService()

10、编辑vue文件

1. App.vue

2. UserList.vue（注意：修改提交的地方有些问题，抽空修改下）

3. AddUser.vue

11、目录结构

12、运行效果图

• 用户列表：
  
• 添加用户：

• 修改用户：
  

注意：有些方法尚未实现，表单缺少验证功能，注意修改后端的端口信息server.js

const express = require("express");
const cors = require("cors");
const app = express();
var corsOptions = {
  origin: "http://localhost:3000"
};
app.use(cors(corsOptions));
// 解析内容类型为：application/json 的请求
app.use(express.json());
// 解析内容类型为：application/x-www-form-urlencoded 的请求
app.use(express.urlencoded({ extended: true }));
const db = require("./app/models");
db.sequelize.sync();
/** 
 * 通过models实例创建数据库表时使用
db.sequelize.sync({ force: true }).then(() => {
  console.log("删除并且重新同步数据库！！！");
});
 */
// 简单路由
app.get("/", (req, res) => {
  res.json({ message: "欢迎来到我的应用！！！" });
});
require("./app/routes/user.routes")(app);
// 设置端口, 监听请求
const PORT = process.env.PORT || 9000;
app.listen(PORT, () => {
  console.log(`服务器正在运行，端口为： ${PORT}.`);
});