vue技术入门篇

Posted 2020-12-17 zxh06820

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
      }
    },