项目技术总结

拿到项目时，首先对它进行了需求分析，数据库设计，对原型图进行分析修改。由于对金融知识的欠缺，在做需求分析的时候没有很清晰的思路。需求分析没有做好，导致创建数据库时很是头疼。通过查阅资料把需求分析和数据库设计给完成了，根据需求分析也相应的修改了原型图。

采用技术：

（1）采用Element-UI框架，Element-UI一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库来进行组件制作。使用Element-UI组件对页面进行整体的布局，帮助加快开发的进程。

（2）后台服务采用node.js服务，用node.js搭建一个链接MySQL数据库的服务，进行数据的增删改查功能实现。

（3）使用MySQL数据库，搭建后台数据保存服务。MySQL是一种关系型数据库管理，它体积小、速度快、总体拥有成本低。

（4）Vue.js框架，Vue.js是一套构建用户界面的渐进式框架。使用了Vue.js里的Vue-router，Vue-router是Vue.js的官方路由插件。利用Vue-router实现界面的跳转，也就是组件之间的切换。

（5）用Axios发起用户请求，Axios是基于promise用于浏览器和node.js的客户端，用于：支持浏览器和node.js，支持promise，能拦截请求和响应，能转换请求和响应数据，能取消请求，自动转换JSON数据，浏览器端支持防止跨域请求伪造（CSRF）。

（6）用Axure R8对原型图进行修改，设计。

（7）用Git将代码上传到Gitee的仓库里。 

登录页面使用session将用户的登录信息存到本地服务，根据session设置的值，设置路由守卫，判断是否有没有session的值。当没有session值时输入其他路由地址将无法跳转过去。

login() {
      this.$refs.loginFromRef.validate(async (valid) => {
        if (!valid) return;
        const { data } = await this.$axios.post("/login/login", this.loginFrom);
        if (data.code !== 200) {
          this.$message.error("用户名或密码错误");
          this.$router.push("/index");
        } else {
          // 取出data里的值
          let login_session = [
            {
              admin_id: data.data[0].admin_id,
              admin_Name: data.data[0].admin_Name,
              admin_Account: data.data[0].admin_Account,
              admin_Type: data.data[0].admin_Type,
              admin_url:data.data[0].admin_url,
            },
          ];
            // 将取出来的值存到session里
          sessionStorage.setItem("login", JSON.stringify(login_session));
          this.$message({
            duration:500,
            message: "登录成功，欢迎您！",
            type: "success",
          });
          this.$router.push("/Index");
        }
      });
    },
  },

 路由守卫设置

router.beforeEach((to, from, next) => {
  if (to.meta.isAuth != false) {
    if (!sessionStorage.getItem('login')) {
      alert('请先登录')
      next('/')
    } else {
      console.log(to.path);
      let str = (to.path).split('/')
      let path = str[2]
      sessionStorage.setItem("path", path);
      next()
    }
  } else {
    next()
  }
})

请求数据库数据，使用Axios发起请求。利用封装好的跨域，对node发起访问通过访问node将值传给数据库，拿到我们想要的数据。将返回的数据进行处理然后再对页面渲染。使用表单传值时，将它的整个数据提交会默认有提交跳转。将它单个的进行数据传值就不会有提交和跳转，或者阻止冒泡事件。

发送axios

async recordsQuery(){
            this.recordData = []
            let search =  await this.$axios({
                method:'post',
                url:'/experience/expeSearch',
                data:{
                    phone:this.phone,
                    name:this.name,
                    channel:this.value_channel,
                    state:this.value_state
                }
            })
            this.processing(search.data.data)
        },

 将传回的数据传入自己写好的一个数据处理方法里面进行处理，得到自己想要的数据

processing(data){
            let record = {};
            data.forEach((obj,i) => {
                if(obj.exp_userTpye == 0){
                        obj.exp_userTpye='网站'
                    }else if(obj.exp_userTpye==1){
                        obj.exp_userTpye='Android客户端'
                    }else{
                        obj.exp_userTpye='iOS客户端'
                    };
                    if(obj.exp_Type == 0){
                        obj.exp_Type='未使用'
                    }else if(obj.exp_Type==1){
                        obj.exp_Type='已使用'
                    }else{
                        obj.exp_Type='已过期'
                    }
                record={
                    name:obj.exp_name,
                    til:obj.exp_tel,
                    userType:obj.exp_userTpye,
                    getTime:dayjs(obj.exp_getTime).format('YYYY-MM-DD HH:mm:ss'),  
                    overTime:dayjs(obj.exp_overTime).format('YYYY-MM-DD HH:mm:ss'),
                    useTime:dayjs(obj.exp_useTime).format('YYYY-MM-DD HH:mm:ss'),
                    ename:obj.exp_e_Name,
                    amount:obj.e_Amount,
                    Interest:obj.exp_e_Interest+`%`,
                    earnings:obj.e_Amount*obj.exp_e_Interest,
                    type:obj.exp_Type,
                }
                this.recordData.push(record)
            });
        },

使用Git将自己写好的模块代码上传到仓库，与他人写的模块代码进行整合，成为一个完成的项目。