互联网金融后台管理系统

互联网金融后台管理系统

一、项目经验

在做这个项目的时候，前期应该将业务流程梳理通透，因为涉及到金融这个方面，所以需要学习一些金融方面的知识。然后就是数据设计，表与表之间的关联性，移动端和客户端的关联。之后就是UI样式，布局问题，都应该在前期确定好。

二、技术总结

2.1搜索功能，遇到数据不刷新
解决方法：在组件内写一个监听函数

watch: { //监听
      propData() {
        this.currentData = this.beforeData
      }
    },

2.2路由跳转

this.$router.push("/index")

2.3路由跳转并传参

 **get**
this. $router.push({name:" ",query:{obj}})

取值 $route.query.obj

**post**
this.$router.push({name:" ",params:{obj}})

 取值 $route.params.obj

2.4 时间格式转换

第一种：后端处理

将时间转换成YYYY-MM-DD HH:mm:ss

1.下载依赖包

	npm i silly-datetime

2.引入依赖包

 var sd = require('silly-datetime');

3.使用

	let bo_upTime = sd.format(new Date(), 'YYYY-MM-DD HH:mm:ss')

第二种：前端处理

使用过滤器filters
安装npm i moment或者直接引入moment.js文件

<template>
  <div>
    <p>时间：{{timestamp | format('YYYY-MM-DD HH-mm-ss')}}</p>
  </div>
</template>

<script>
import moment from '../../utils/moment'
export default {
  name: '',
  data() {
    return {
      timestamp:1234567890123,
    }
  },
  filters:{
    format(value,formatter){
      return moment(value).format(formatter)
    },
  },
</script>

效果展示

2.5 axios传参

get传参    

只有params方式

两种写法：

1. 直接url后面加参数
    this.$axios.get('productDetails?id=5')

2. params属性传参
               this.$axios.get('productDetails',{
                 params:{
                    id:this.id
                 }
               })

post传参

第一种：data方式
this.$axios({
   url: '/api/user/login' ,
   method: 'post',
   headers: {
      'Content-Type': 'application/json'
   },
   data:{
      username: this.user,
      pwd: this.pwd
   }
}).then((res) => {
  console.log(res)
})

第二种：params方式
this.$axios({
   url: '/api/user/login' ,
   method: 'post',
   headers: {
      'Content-Type': 'application/json'
   },
   params:{
      username: this.user,
      pwd: this.pwd
   }
}).then((res) => {
  console.log(res)
})

注：直接使用post方法，传递的参数为 data 的方式
this.$axios.post('/api/user/login',{username: this.user, pwd: this.pwd },
 {
   headers: {
     'Content-Type': 'application/json'
   }
 }).then((res) => {
 console.log(res)
})

2.6图片上传

element-ui组件，发起请求

备注：
action 向服务器发起请求
name字段必须有
imageUrl 默认显示预览图片

下载multer   npm i multer
单独创建一个multer文件，内容如下

var  multer=require('multer');
var storage = multer.diskStorage({
     //设置上传后文件路径，uploads文件夹会自动创建。
        destination: function (req, file, cb) {
            cb(null, './public/uploads')
       },
     //给上传文件重命名，获取添加后缀名
      filename: function (req, file, cb) {
          var fileFormat = (file.originalname).split(".");
          cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);//input中的name+时间戳+图片格式类型
      }
 });  
    //添加配置文件到muler对象。
    var upload = multer({
         storage: storage
   });
module.exports = upload;

路由文件

router.post('/uploadImage',uploadImg)

控制层，引入multer文件

const {dbConfig}=require('../../config/dbConfig')
const mymulter=require('../../util/multer')
 //multer有single()中的名称必须是表单上传字段的name名称。
const upload=mymulter.single('txtFile')
module.exports={
    uploadImg(req,res){
        upload(req,res,function(err){
            //添加错误处理
            if(err){
                return console.log(err);
            }
            //文件信息在req.file或者req.files中显示。
            // console.log(req);
            let file=req.file.path.replace(/public\\/,'')//将public/ 替换成空
            console.log(file);//可以将数据路径存到数据库
            res.send(file)
            // res.send("<img src='"+file+"'>")
        })
    },
}

2.7兄弟组件传值–事件车

1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据

2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。

3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。

4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

1.创建—个单独的js文件eventVue.js,内容如下
import Vue from "vue";
export const eventVue=new Vue()

2.在main.js中加入
Vue.prototype.$eventVue=new Vue()

3.在需要用到的组件中引入（分别在兄弟组件中引入）
import {eventVue} from '../../public/eventVue'

4.传递参数
eventVue.$emit("myFun",this.imageUrl)

5.接收参数（把参数赋给需要的）
eventVue.$on("myFun", (message) => {
   //这里最好用箭头函数，不然this指向有问题
   this.imageUrl = message;
});