吐槽
最近才开始学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语法:
不能直接改写输入进来的接口, 但可以改变这个对象的属性
模块整体加载
由于ES6的import语法规范有点多, 我就只展示了些个人认为常用基础的, 大家可以去下面的ES6 Module 的语法,http://es6.ruanyifeng.com/#docs/module 全面了解一下ES6的规范。
相关文章, 更好了解其中的语法以及不同的规范标准 (这几篇文章我看了都蛮好理解的, 对于新手的我来说帮助了很多,上面的教程也是从里面来的)node.js的exports、module.exports与ES6的export、export default深入详解
CommonJS规范https://javascript.ruanyifeng.com/nodejs/module.html
ES6 Module 的语法,http://es6.ruanyifeng.com/#docs/module
node.js中的import和require