记录一下写毕设的时候的问题.

毕设用的 vue+nodejs 写的一个预约挂号的系统,UI设计什么的统统没有,写的很糊但是都是自己写的.

后端

后端方面用的 nodejs+express,一开始就装了 cors 允许跨域,然后配置了 JWT 作为鉴权 token,之后就开始挂载路由写 api,用 postman 测试,这里问题都不大 数据库方面用的是 MySQL 的数据库,用 navicat 来进行管理,nodejs 的 mysql 插件还需要 MySQL 数据库改加密方式才连的上,这问题当时装的时候就知道了,

因为 MySQL 新版本的加密问题,mysql 插件暂时无法适配,只能去改 MySQL 数据库的加密方式,操作如下

alter USER 'root'@'localhost' IDENTIFIED BY 'password' PASSWORD EXPIRENEVER;
alter USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '修改自己的密码';

还有就是在创建连接池的时候需要设置时区,否则很容易查半天查不出原因.

前端

主要是前端问题比较多,因为我主要是写前端的嘛

然后前端用的框架是 vue 和 elementUI,也是一堆问题

vue

vue 项目用的 vue2,所以是用的 vuecli 来构建前端项目,vuecli 的可视化页面很简单就能构建一个 vue2 的项目,可以很简单的安装各种所需的插件. 能自动给你一个处理好了的 webpack 包,不需要你自己再去整各种各样的操作去配置 webpack.

使用 axios 作为 http 请求的工具,axios 设置 baseURL 设置 headers 设置 Authoritarian 都可以很简单

axios.defaults.baseURL = "http://127.0.0.1:3000";
axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
// 使用axios请求拦截器去完成路由守卫任务
axios.interceptors.request.use((config) => {
	config.headers.Authorization = window.localStorage.getItem("adminToken");
	return config;
});

路由

使用 router 进行路由跳转 , 组件需要导入并注册才能用

const routes = [
	{ path: "/", redirect: "/login" },
	{ path: "/login", component: Login },
	{
		path: "/home",
		component: Home,
		children: [
			{ path: "/user", component: user },
			{ path: "/doctor", component: doctor },
			{ path: "/department", component: department },
			{ path: "/registered", component: registered },
		],
	},
];

element

elementui 按需导入,不需要的组件就不用导入,可以减少占用

element 自带的表单验证可以自定义规则,需要在 data 里边定义一个 rules 对象,然后在 el-form-item 里边加上 rules 属性,然后就可以自定义规则了

而且需要注意的是,表单数据里边的名字得和规则验证里边的名字匹配,然后在 el-form-item 里边加上 prop 属性,值为表单数据里边的名字,这样才能正确的验证 否则就是一直提示错误信息,一直得不到验证

regForm: {
    username: "",
    password: "",
},
regFormRules: {
    username: [
        {
            required: true,
            message: "请输入用户名称",
            trigger: "blur",
        },
        {
            min: 2,
            max: 10,
            message: "长度是2到10个字符",
            trigger: "blur",
        },
    ],
    password: [
        {
            required: true,
            message: "请输入注册密码",
            trigger: "blur",
        },
        {
            min: 6,
            max: 20,
            message: "密码长度是6到20个字符",
            trigger: "blur",
        },
    ],
},

formatter

vue展示性别但是后端传来的数据性别是数字,需要使用formatter进行过滤,就可以在页面上展示01代表的男女性别了

<el-table-column
    prop="dsex"
    :formatter="sexFormate"
    label="医生性别"
    align="center"
>
</el-table-column>

sexFormate(row, index) {
if (row.dsex == 1) {
    return "男";
} else if (row.dsex == 0) {
    return "女";
}
},