1. 登陆注册

功能描述登陆{成功： 跳到大屏页面失败： 刷新页面
}
若路由地址中直接进入/（主页）则会自动跳转到登录页实现方式
router---> index中使用导航守卫
若成功登陆后后端会返回userInfo数据，前端将userInfo存入缓存中
最后使用 router.beforeEach 注册一个全局前置守卫，判断localStorage中是否含有userInfo数据，否则回退到/login
否则进入/页面

1. 验证码实现

利用插件 svg-captcha
详情查看文档即可（https://github.com/produck/svg-captcha）

1. node连接数据库并编写接口

在项目里有一个server文件夹，该文件夹存储所有的后端代码
具体实现;
*** server/app.js中引入 express、mysql包
let app = express()
app.listen(5000, () => {console.log('服务器启动成功。 ---> http://127.0.0.1:5000/api');
}) // 最后在5000端口启动*** server/db/index.js中配置对应的数据库信息即可（ip、账号、密码以及要操作的数据库）
// 用于配置数据库相关信息
let mysql = require('mysql')
// 创建连接池
let db = mysql.createPool({host: '127.0.0.1',     //数据库IP地址user: 'root',          //数据库登录账号password: '',      //数据库登录密码database: 'housedistributionbigscreen'       //要操作的数据库
})
module.exports = db*** 最后server/API 文件夹中编写对应接口即可

1. 前端数据请求的封装以及实现请求接口获取数据

首先安装axios依赖
项目文件夹下 src/utils/request.js中引入
设置请求拦截和相应拦截器
封装get、post请求
最后在src/api/各个文件中引入get/post请求即可
请求示例：
// 用户模块 接口
import {get, post} from "../utils/request";export const getPicCode = () => get("api/getPicCode", null);
export const login = (body) => post("api/login", body);页面中使用
导入对应的接口，直接使用即可（因为已经做了封装的）
使用示例：import { getTitleList } from "@/api/titleModule";getTitleList().then(res => {console.log(res)})

1. 图片上传功能的实现

server/API/picModule.js中引入multer依赖（依赖的引入方式：npm i 包名）
上传方法的封装
const upload = multer({storage: multer.diskStorage({//设置文件存储位置destination: function (req, file, cb) {let date = new Date();let year = date.getFullYear();let month = (date.getMonth() + 1).toString().padStart(2, '0');let day = date.getDate();// 设置存储路径，由于我的静态资源目录是设置的 public，所以设置在 public 文件下let dir = `public/uploads/${file.fieldname}/${year}${month}${day}`;//判断目录是否存在，没有则创建if (!fs.existsSync(dir)) {fs.mkdirSync(dir, {recursive: true});}cb(null, dir);},//设置文件名称filename(req, file, cb) {// 重命名文件名，防止重复let fileName = file.fieldname + '-' + Date.now() + '-' + file.originalnamecb(null, fileName);}})
});接口的封装
// 常用的两方法：多选用 array(),单选用single()
const multipleFile = upload.array('file', 3)exports.upload = (req, res, next) => {multipleFile(req, res, err => {if (err instanceof multer.MulterError) {} else if (err) {}for (let i = 0; i < req.files.length; i++) {let id = makeUuid().toString()let sql = `INSERT INTO piclist VALUES ('${id}',?)`// 重新设置存储在数据库的 url 地址，去掉前面的public字符串方便读取let destination = req.files[i].destination.substring(6)let url = `${destination}/${req.files[i].filename}`let resData = {name: req.files[i].filename,url}db.query(sql, [url], function (err, data) {if (err) {res.json({code: 500,msg: '服务器报错，请稍后重试'})} else {res.json({code: 200,msg: '成功',data: data,resData})}})}})
}页面中实现如下:
利用elementUi中el-upload组件封装上传方法（不会描述就说是百度的就好了，全文封装组件百度均能找到）
页面中直接引入使用即可

1. 地图如何引入和使用

看官网即可，引入的是天地图
包括打点和跳弹窗，直接说看的官网API即可

1. 滚动表格的实现

利用datav组件
导入 ---> 使用即可

1. 各种动图的实现

echarts（https://echarts.apache.org/zh/index.html）