一、导航栏配置
在项目开始之前,应该进行导航栏的配置,这种配置对于新人小白来说还是比较难懂,所以由项目经理提供模板进行配置:
导航栏布置成功就可以进行页面布局与数据交互了。
二、进行数据交互(属于横向编程)
整个项目页面部署顺序为:
api->store->vue页面
vue页面->store->api
其中:api用来封装axios接口调用,从swagger-ui中拿出接口路径,进行axios的接口配置。其中findAll接口需要进行分页处理。api中的接口中的数据如果需要进行修改就放入store中进行修改,如果不需要进行修改则直接引入vue页面中
以下是需要修改数据模型中数据的操作:
store用来进行数据的处理,vuex是状态机,所有的数据都通过这一仓库进行处理,然后供vue页面使用。
let storeConf = {
//状态存储的位置
state:{
msg:"hello"
//状态对象必须是纯粹的, (通过“{}”或“new Object”创建的),表示网页中可以访问的变量
},
//获取 可以获取到state中的数据进行处理再返回
getters:{
//从 store 中的state中派生出一些状态。getter也可以返回一个函数,来实现给 getter 传参。
msgUpper(state){
return state.msg.upperCase();
}
},
//突变 同步操作 修改state中的数据
更改Vuex的store中的状态的唯一方法是提交 mutation,必须是同步操作。mutation函数的第一个参
数为state , 第二个参数是来接受在调用mutation的时候用户传递的第一个实参
mutations:{
// payload 载荷 参数
//喜欢用全大写
CHANGE_MSG(state,payload)
{
state.msg=payload
},
......
},
//动作 可以放异步操作 提交突变 分发动作
actions:{
//Action函数接受一个与store实例具有相同方法和属性的context对象,因此
你可以调用context.commit提交一个 mutation,或者通过 context.state和 context.getters来获
取 state和getters。第二个参数用来接收用户调用的时候传递的第一个实参
findAll({commit,dispatch},payload){
$.get('',null,(res)=>{
res设置到state中
commit('',res.data)
});
},
deleteById({commit,dispatch},payload){
$.get('',payload,(res)=>{
if(res.status==200){
//分发动作
dispatch('findAll',{});
}
})
}
}
};
修改数据模型中两种方式 提交突变或者分发数据(项目中常用这种方法修改数据模型)
1.提交突变
mutations:{
// st类仓库对象 这里的第一个参数是state
changeMsg(state,payload)
{
state.storeMsg = payload;
}
},
2.分发数据
// st类仓库对象 这里的第一个参数是默认传递的
actions:{
getMsg({commit,dispatch,getters,state},payload)
{
commit('changeMsg',payload)
//changeMsg是mutations定义的
}
}
组件绑定的辅助函数
mapState(namespace?: string, map: Array<string> | Object<string | function>): Object
为组件创建计算属性以返回 Vuex store 中的状态。
第一个参数是可选的,可以是一个命名空间字符串。
对象形式的第二个参数的成员可以是一个函数。function(state: any)
mapGetters(namespace?: string, map: Array<string> | Object<string>): Object
为组件创建计算属性以返回 getter 的返回值
第一个参数是可选的,可以是一个命名空间字符串。
mapActions(namespace?: string, map: Array<string> | Object<string | function>): Object
创建组件方法分发 action。
mapMutations(namespace?: string, map: Array<string> | Object<string | function>): Object
创建组件方法提交 mutation
vue页面中就开始使用:
当使用 let{mapState,mapMutations,mapGetters,mapActions} =Vuex;后,Vuex可以省略.
let{mapState,mapMutations,mapGetters,mapActions} =Vuex;
mapState()
mapGetters()
mapMutations()
mapActions()
computed:{
...mapState(),
...mapGetters()
},
methods:{
...mapMutations(),
...mapActions()
}
如果不需要修改数据模型中数据,则直接在vue页面中调用api接口即可使用~(以batchDelete为例)
三、页面布局(包括HTML、CSS、JavaScript)
对vue页面进行布局并且完成功能实现。属于纵向编程。
可以借用element-ui里的布局进行修饰。
对于按钮功能的实现需要JavaScript来进行实现。在methods中提供相应方法。在data中提供相应属性。
每个模块的功能都不尽相同,需要注意区别。
最后进行项目打包,那么一个完整的项目就做完了~
prod是产品阶段的包,stage是测试阶段的包,来到项目文件夹,执行npm run build:prod /npm run build:stage进行打包,
之后会出现一个dist 的文件夹,其中包括index.html,static,将其部署到云服务器上,访问自己的云服务器相关接口就可以看到项目成品。