node.js结合Element.Ui开发前端页面

吐槽

最近才开始学node.js，第一次接触这种开发模式，和以前web开发不一样, 但幸好自己学了一些vue，看起来没有那么吃力，慢慢了解把~。

Element-UI是结合vue的UI框架

Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组
件库。
Element-UI官方站点：http://element.eleme.io/#/zh-CN/component/installation

启动

项目目录下打开命令窗口：npm run dev（执行对js打包并启动项目）
执行的是package.json中的js
package.json文件（文件中有执行动作和依赖管理）

..........
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },
  .........

在这里插入图片描述
浏览器输入：http://localhost:11000

page_list.vue（前端示例页面）

目前这个前端页面分为三部分
1、视图（template）（包含了Vue与Element-UI的语法）
2、js
3、css

<template>
    <div>
    	//@click就是vue很熟悉的写法了， 点击调用vue中query的方法
      <el-button type="primary" @click="query" size="small">查询</el-button>
      
      //其中的:data="list"是Element-UI的表格属性， 表示绑定表格展示的数据数组
      <el-table :data="list" stripe style="width: 100%">
        <el-table-column type="index" width="60">
        </el-table-column>
        //其中的 prop="pageName"是Element-UI的表格属性， 表示绑定数组每个元素的属性
        <el-table-column prop="pageName" label="页面名称" width="120">
        </el-table-column>
        <el-table-column prop="pageAliase" label="别名" width="120">
        </el-table-column>
        <el-table-column prop="pageType" label="页面类型" width="150">
        </el-table-column>
        <el-table-column prop="pageWebPath" label="访问路径" width="250">
        </el-table-column>
        <el-table-column prop="pagePhysicalPath" label="物理路径" width="250">
        </el-table-column>
        <el-table-column prop="pageCreateTime" label="创建时间" width="180" >
        </el-table-column>
      </el-table>
		
		//:total="total",  :page-size="params.size"就是vue很熟悉的写法了绑定vue实例的数据
		//:current-page是Element-UI的分页属性， 只不过是绑定了vue实例的数据
		//@current-change="changePage"是Element-UI的分页方法, 当点击的current-change变化时就会调用该方法了
		//layout	组件布局，子组件名用逗号分隔（目前不明）
      <el-pagination
        layout="prev, pager, next"
        :total="total" :page-size="params.size" :current-page="params.page" @current-change="changePage">
      </el-pagination>
    </div>
</template>

<script>
	//导入j封装好的js方法
    //若要调用与后端交互的方法， 必须引入包含其方法的cms.js文件
    import * as cmsApi from "./../api/cms"
	
	//因为该项目中的js代码都要被打包， 所以都要 export 导出被打包（目前理解）
    export default {
      data() {
        return {
          "list": [],
          total:50,
          params:{
            page:1,
            size:10
          },
        }
      },
      methods:{
        query: function(){
          alert("查询.");
          //调用服务端接口
          cmsApi.page_list(this.params.page, this.params.size).then((res)=>{
            this.list = res.queryResult.list;
            this.total = res.queryResult.total;
          });

        },
        changePage: function(){
          //this 当前vue实例对象调用
          this.query();
        }
      }
    }
</script>

<style>
    /*编写页面样式，不是必须*/
</style>

page_list.vue页面引用的js文件

public.js文件我就不展示了，避免看起来冗杂，了解一下结构可好。
cms.js

//将public.js导入到命名为http的变量中(ES6标准)
import http from './../../../base/api/public'
import querystring from 'querystring'

//将sysConfig导入到命名为sysConfig的变量中(CommonJS规范)
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;

//定义方法， 请求服务端的页面接口
export const page_list = (page, size, params)=>{
    //返回一个Promise对象
    return http.requestQuickGet("http://127.0.0.1:31001/cms/page/list/" + page + "/" + size);
}

页面路由（把page_list.vue页面添加到路由）

// 引入 module/home/page/home.vue路径 完整的html页面 里面有视图有style和js
// @ 代表src文件目录下 在webpack.base.conf.js可找到@的配置————'@': resolve('src'),
// Home是将导入的文件的命名为Home

//导入首页模板
import Home from '@/module/home/page/home.vue';
//导入page_list
import page_list from '@/module/cms/page/page_list.vue';
export default [{
    //父模块
    //设置页面访问路径 如果 path: '/aa'  浏览器输入 http://localhost:11000/#/aa
    path: '/huang',
    //套用的模板名（首页模板）
    component: Home,
    //网页显示的字段
    name: 'CMS',
    //是否隐藏该模块
    hidden: false,
    //子模块（列表）
    children:[
      {
        //点击该模块后导向的url
        path:'/cms/page/list', 
        //模块名
        name:'页面列表1',
        //套用的模板（page_list）
        component:page_list,
        hidden:false
      },
      {
        path:'/cms/page/list2', 
        name:'页面列表2',
        component:page_list,
        hidden:false
      }
    ]
    // ,
    // redirect: '/home',
    // children: [
    //   {path: 'home', component: Home}
    // ]
  }/*,
  {
    path: '/login',
    component: Login,
    name: 'Login',
    hidden: true
  }*/
]

这个总路由文件才是统筹每个模块的Path属性，然后添加到路由中！

//设置路由文件
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
// 定义路由配置
let routes = []
let concat = (router) => {
  routes = routes.concat(router)
}
// // 导入路由规则
import HomeRouter from '@/module/home/router'
import CmsRouter from '@/module/cms/router'
// 合并路由规则
concat(HomeRouter)
concat(CmsRouter)
export default routes;

node.js前端开发请求响应流程总结

1、在浏览器输入前端url
2、前端框架vue.js根据url解析路由，根据路由找到page_list.vue页面
3、首先执行page_list.vue中的钩子方法
4、在钩子方法中调用query方法。
5、在query方法中调用cms.js中的page_list方法
6、cms.js中的page_list方法通过axios请求服务端接口
7、采用proxyTable解决跨域问题，node.js将请求转发到服务端(http://localhost:31001/cms/page/list)
8、服务端处理，将查询结果响应给前端
9、成功响应调用then方法，在then方法中处理响应结果，将查询结果赋值给数据模型中的total和list变量。
10、vue.js通过双向数据绑定将list数据渲染输出。

Command JS规范：
module.exports 导出，然后用require导入

ES6规范：
模块功能主要由两个命令构成：export和import，export_default。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

现在一般采用ES6规范

ES6规范：
export语法：
在这里插入图片描述
输出函数和给输出函数起别名

错误写法以及纠正

import语法：

不能直接改写输入进来的接口，但可以改变这个对象的属性

模块整体加载