财务报表类监督系统

搭建经济报表监控系统

技术栈：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小时
       });
       //通过验证存入session
       req.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.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: 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问题的代码
    }
  }