Vue后台管理系统练习-8 user界面的表单修改

本篇在原有界面的基础上增加了逻辑与api接口

新增用户
首先需要理清，现在需要的是在user页面中点击新增用户，然后显示form组件，把表单设置传入form组件中，form组件中接收用户输入的内容并且将其发送网络请求
这里因为是模拟数据，所以网络请求会被mock拦截，并且由user.js中的方法进行处理
修改了数据后再重新发送网络请求，对页面进行更新
流程图大概是这样：
这里我们首先解决一下user.js模拟接口的内置方法，在之前已经通过Mock模拟出了user数据，因此只要对原有的数据进行操作就好了

其中createUser函数内容如下：

createUser(config) {
   
  const {
    username, gender, age, userType } = JSON.parse(config.body)
  UserList.unshift({
   
	id: Mock.Random.guid(),
	username: username,
	gender: gender,
	age: age,
	userType: userType,
  })

  return {
   
	code: 200,
	data: {
   
	  msg: '添加成功！'
	}
  }
},

在mock.js中设置拦截，这样当向’/user/create’发送请求后就会被拦截，post方法的数据会存在body中（后面设置拦截的方法都一样，就不重复写了）：

Mock.mock('/user/create', 'post', user.createUser)

在commonForm封装组件内，会获取父组件发来的formType

formType:{
   
  url:'/user/create',