标签：common 列表 名称 comm 课程 静态 sysconfig nts 模块使用
1.目录结构
build：webpack构建命令目录，包括运行开发环境，项目打包等配置
config：webpack和node基础，开发，线上环境的配置
dist：webpack打包后生成的静态文件目录
node_modules:项目依赖的js包
src：项目根目录
----assets：静态资源目录，这里的资源会被webpack构建
----base：vue项目基础组件目录
--------api：项目
--------componets：组件（通用页面）所有模块使用
--------router：路由，请求url-->页面
----common：工具类
----mock：前端工程用来做单元测试，模拟写的用例
----module：模块
--------modulename：模块名称
------------api：模块下的js文件，定义方法，请求服务端接口
------------components：单独模块下的组件
------------page：存放页面信息
------------router：路由
--------home：主页
----statics：静态资源
----vuex：基本状态管理工具
package.json：npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
2.页面.vue
<template> <!-- 编写页面静态部分，即view部分--> </template> <script> /* 编写页面静态部分，即model及vm部分 */ </script> <style> /*编写页面样式，不是必须的*/ </style>
3.路由（访问url）
index.js
import 别名 from ‘@(表示src目录)/。。。。‘
。。。
浏览器发送http请求
Vue.js根据路由找到page_list页面
执行page_list.vue中的钩子方法
钩子方法执行page_list.vue中的query方法
调用执行cms.js中的page_list方法
解决跨域有node.js转发到服务器
服务器返回到then(res)中
vue的钩子方法：created():vue实例创建好还未渲染时执行；
mounted():vue渲染完成后执行；
api中方法：
//我的课程列表
export const findCourseList = (page,size,params) => {
//使用工具类将json对象转成key/value
let queries = querystring.stringify(params)
return http.requestQuickGet(apiUrl+"/course/coursebase/list/"+page+"/"+size+"?"+queries)
}
method:
//获取课程列表
getCourse() {
courseApi.findCourseList(this.page,this.size,{}).then((res) => {
console.log(res);
if(res.success){
this.total = res.queryResult.total;
this.courses = res.queryResult.list;
}
});
},
钩子方法
mounted() {
//查询我的课程
this.getCourse();
}
返回的数据绑定
data() {
return {
page:1,
size:7,
total: 0,
courses: [], //我的课程列表
sels: [],//列表选中列
imgUrl:sysConfig.imgUrl
}
},
标签：common 列表 名称 comm 课程 静态 sysconfig nts 模块使用
原文地址：https://www.cnblogs.com/zxh06820/p/13339533.html
