太原市房屋分布大屏功能及实现描述

1. 登陆注册

功能描述

登陆{
    成功： 跳到大屏页面
    失败： 刷新页面
}
若路由地址中直接进入/（主页）则会自动跳转到登录页

实现方式
router---> index中使用导航守卫
若成功登陆后后端会返回userInfo数据，前端将userInfo存入缓存中
最后使用 router.beforeEach 注册一个全局前置守卫，判断localStorage中是否含有userInfo数据，否则回退到/login
否则进入/页面

2. 验证码实现

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

3. 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 文件夹中编写对应接口即可

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

首先安装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)
            })

5. 图片上传功能的实现

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.originalname
            cb(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组件封装上传方法（不会描述就说是百度的就好了，全文封装组件百度均能找到）
页面中直接引入使用即可

6. 地图如何引入和使用

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

7. 滚动表格的实现

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

8. 各种动图的实现

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