搭建经济报表监控系统

技术栈：vue2.x+emementui+express+axios+babel+rourter+webpack+nginx+myscal

项目搭建

前期准备

1. 搭建vue+express 静态+本地服务器，由于考虑后端接口与前端进度不一，采用本地化服务器处理静态数据

1.1. 搭建流程

npm i express --save
npm i express-generator -g
express --view=pug server
cd server
npm i //默认访问路径：localhost:3000
参考博客：https://www.cnblogs.com/ydam/p/10983564.html

1.2. 搭建vue 项目

npm i webpack ui
npm run ui /npm start /默认访问路径：localhost:8080

1.3. 前后协议请求采用axios

npm i axios
important axios from ‘axios’ //min.js 引入插件
Vue.proptype.$http=axios; //变量命名

//express server
router.get('/', async(req, res, next) => {const newUser = await models.User.find()res.send(newUser);})//登录
router.post('/login', async(req, res, next) => {// const newUser = await models.User.find()// res.send(newUser);var name = req.body.name;var password = req.body.password;if (name == '' || password == '') {resData.code = -1;resData.message = `用户名或密码不能为空`;res.json(resData);return}await models.User.findOne({name: name,password: password}).then(function(userInfo) {if (!userInfo) {resData.code = 1;resData.message = `用户名或密码错误`;res.json(resData);return}//cookies验证通过则登录// 1cookie名称 2cookie值 3设定他的一些参数res.cookie('_id', userInfo._id, {path: '/',maxAge: 1000 * 60 * 60 * 6 //cookie 时限1小时});//通过验证存入sessionreq.session.user = userInfo;resData.message = '登录成功';resData.userInfo = {_id: userInfo._id,name: userInfo.name,password: userInfo.password};res.json(resData);// res.send(resData);return}).catch(()=>{})
});
//vue login 页面 let params = {name: that.name,password: that.password};that.$http.post("/sales/login", params).then(res => {if (res.data.status == 1) {//由于页面切换后，path后面的参数可能就被去掉了，改为通过localStorage，页面需要的时候直接读取即可。localStorage.setItem("sale-wewins-user", that.name);localStorage.setItem("sale-wewins-role", res.data.data.role);localStorage.setItem("sale-wewins-customer",res.data.data.customer);console.log("__to");that.$router.push("/index");// if (localStorage) {//   localStorage.setItem("sale-wewins-user", that.name);//   localStorage.setItem("sale-wewins-role", res.data.data.role);//   localStorage.setItem(//     "sale-wewins-customer",//     res.data.data.customer//   );//   that.$router.push({ path: "/index" });// } else {//   // that.errorMsg = that.$t("login.errorMsg[3]");// }} else {if (res.data.message == "Admin login failed.") {that.errorMsg = that.$t("login.errorMsg[2]");} else if ((res.data.message = "NO_USER")) {that.errorMsg = that.$t("login.errorMsg[0]");} else {that.errorMsg = res.data.message;}}that.loading = false;}).catch(err => {that.loading = false;that.$message.error(err.message);});

1.4.引入elementu 插件

npm i element-ui -S
important ElementUI from 'element-ui
import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI, {size: 'small',i18n: (key, value) => i18n.t(key, value) //兼容低版本i18n// i18n.lang == "En" ? enLocale : zhLocale});

1.5. i18n国际化
.

npm i vue-i18n -S
国际化语言编译
国家语言配置及挂在点
国际化语言设置目录
页面使用编译字体

elementui table 插入国际化效验：https://segmentfault.com/q/1010000018736400

1.7.导航跳转报错

在升级了Vue-Router版本到到3.1.0及以上之后，页面在跳转路由控制台会报Uncaught (in promise)的问题:https://blog.csdn.net/haidong55/article/details/100939076?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3

1.8 导出excel 插件

方案一：elementui excel导出控件
https://blog.csdn.net/weixin_44143512/article/details/93979608
缺点是该组件针对于lementui table 数据导出，不能对数据源进行格式化操作
方案二：vue excel 导出控件：
https://www.jianshu.com/p/0cde9576ae4e
相对于第一种，复用性更高，可对数据源及表格进行二次的封装，生成自己想要的格式

1.9. vue打包

打包后，出现页面访问不到css背景图及elementui 的相关字体及图表，原因是：vue项目路由采用history ,打包后的背景图会多加static/css,导致文件找不到路径。

解决办法一：改相对路径为绝对路径 config>index.js

  build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './',    //将绝对路径改为相对路径/*** Source Maps*/productionSourceMap: true,devtool: '#source-map',productionGzip: false,productionGzipExtensions: ['js', 'css'],bundleAnalyzerReport: process.env.npm_config_report}

解决方法二：打包之后的背景图片路径 会多加static/css，导致文件找不到，解决方法如下：在build>utils.js 中加入这行代码： publicPath:’…/…/’,

function generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]if (loader) {loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})})}// Extract CSS when that option is specified// (which is the case during production build)if (options.extract) {return ExtractTextPlugin.extract({use: loaders,publicPath:'../../',             //此行为新增引用资源路径fallback: 'vue-style-loader'})} else {return ['vue-style-loader'].concat(loaders)}}

1.10. 页面刷新nginx 404报错

原因是前端路由采用history模式 ,当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

就觉办法：在文件中的nginx.conf文件中修改，代码如下

server {listen    YYYY;  //自己设置的端口号server_name 192.168.XXX.XXX;  //在黑窗口下ipconifg后出现的IPv4地址复制location /{root E:/website_wap/dist/;  //项目打包后的路径index index.html index.htm;try_files $uri $uri/ /index.html;  //解决刷新页面变成404问题的代码}}