路漫漫其修远兮
吾将上下而求索

vue学习:Vue2.0 / Node.js / MongoDB 打造商城系统-1-7章

课程:Vue2.0 / Node.js / MongoDB 打造商城系统
地址:https://coding.imooc.com/learn/list/113.html
代码:https://git.andblog.cn/root/vue-imoocmall
https://github.com/caixiangc/imoocMall

第1章 课程介绍
1-1 课程-导学 (16:00)

章节如下:
1-2:vue基础
3-4:vueRouter vueResource
5:es6语法
6-14:实战项目
15:vuex
16:webpack
17:部署

收获:
掌握vue全家桶
掌握vue的spa开发
掌握node+express后端接口



1-2 前端框架回顾 (06:04)
1-3 vue概况以及核心思想 (19:36)
2013年底个人开发,2014.11发布0.11版本
vue结合周边生态构成一个灵活的、渐进的框架
核心思想:数据驱动、组件化
通过MVVM数据绑定实现自动同步
通过原生js来模拟vue双向数据绑定原理实现



1-4 vue框架优缺点对比 (07:04)
vue比react快一倍多
更快,更小的体积
简单语法,便于入门



第2章 Vue基础
2-1 nodejs和npm的安装和环境搭建 (07:21)
http://www.runoob.com/nodejs/nodejs-install-setup.html
https://segmentfault.com/a/1190000007829080
Linux 上安装 Node.js
直接使用已编译好的包
Node 官网已经把 linux 下载版本更改为已编译好的版本了,我们可以直接下载解压后使用:
# wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz    // 下载
# tar xf  node-v10.9.0-linux-x64.tar.xz       // 解压
# cd node-v10.9.0-linux-x64/                  // 进入解压目录
# ./bin/node -v                               // 执行node命令 查看版本
v10.9.0

解压文件的 bin 目录底下包含了 node、npm 等命令,我们可以使用 ln 命令来设置软连接:
ln -s /usr/software/nodejs/bin/npm   /usr/local/bin/ 
ln -s /usr/software/nodejs/bin/node   /usr/local/bin/

查看已安装的模块
npm list




2-2 vue环境搭建以及vue-cli使用 (17:09)

vue多页面引用:
	<script src="xxx">
	npm install vue
vue-cli构建spa应用
	npm install -g vue-cli  #全局安装,不是安装到某个项目下面
	vue init webpack-simple democ #简单模式
	vue init webpack demo2  #复杂模式,多了build目录,config目录
	cd demo2
	npm install 
	npm run dev
	


2-3 vue配置(上) (20:34)
	vue init的时候eslink,可以不安装,是语法检查工具。e2e可以不安装,端到端测试
	
	webpack配置文件说明,如果哪个require包不知道什么意思,可以在npm官网查看什么作用
	https://www.jianshu.com/p/a28777405fe9

	require("../config") 等于 require("../config/index.js"),如果名字为index.js,可以省略


	项目里面main.js里面有
	new Vue({
		el: '#app',
		router,
		template: '<App/>',
		//render: h => h(App),
		components: {App}  //这个意思和上面的箭头函数表示的意思是一样的
	})
	
2-4 vue配置(下) (15:00)

	vue-cli配置说明,有空详细看下文章就可以
	https://segmentfault.com/a/1190000010659925
	
	config/index.js 
	assetsPublicPath: '/',   作用为静态资源地址,/static/xxx,如果为cdn上面,这里可以配置为:baidu.com,则静态地址都为:baidu.com/static
	
	轮子工厂,很多轮子
	http://www.wheelsfactory.cn/#/detail?id=239



2-5 vue基础语法 (20:19)
	父子通信还要看!!!!!!!!!!!!!



第3章 Vue-router
3-1 路由基础介绍 (05:27)
	前端路由:根据不同url地址展现不同内容或页面
	优点:
		体验好,不用每次都从服务端拉取,快速展现
	缺点:
		不利于搜索引擎索引
		无法记录之前的滚动位置,无法在前进,后退的时候记住滚动的位置
	

3-2 动态路由匹配 (09:20)
	https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html
	路由有两种模式:history模式和hash模式。hash模式url里面有#,history模式里面没有
	
src/router/index.js 如下
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/components/GoodsList.vue'

Vue.use(Router);

export default new Router({
    mode: 'history',  
    routes: [
    {
        path: '/goods/:goodsId',
        name: 'GoodsList',
        component: GoodsList
    }]
})

src/components/GoodsList.vue 如下
<template>
    <div>
        <span>{{msg}}</span><br>
        <span>{{$route.params.goodsId}}</span>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                msg:"hello vue"
            }
        }
    }
</script>



3-3 嵌套路由 (09:26)
	见代码
	还需要看文档,文档说的可能更明白


3-4 编程式路由 (08:30)
	通过js来实现页面的跳转
	$router.push({path:'name'?a=123})或者$router.push({path:'name',query:{a:123}})

下面是个示例
<button @click='jump'>button</button>

methods:{
	jump(){
		this.$router.push({path:'/cart?a=2'});
	}
}


3-5 命名路由和命名视图 (07:37)
	通过定义路由的名字来进行跳转

router{
	path: 'cart/:cartId'
}

下面是视图
<router-link v-bind:to='{name:'cart', params:{cartId:123}}'>跳转</router-link>
点击会跳转到:/cart/123



第4章 Vue-resource/Axios
4-1 Vue-Resource使用(上) (22:39)
	安装:npm install vue-resource --save
	http://www.cnblogs.com/keepfool/p/5657065.html

get方法
methods: {
	get(){
		this.$http.get('package.json',{
			params: {
				userId: "101",
			},
			headers: {
				token: "abcd",
			}
		}).then(res=>{
			this.msg = res.data;
		},error=>{
			this.msg = error;
		});
	}

post方法
post: function(){
	this.$http.post("package.json",{
		userId: "102",
	},{
		headers:{
			access_token: "abc",
		}
	}).then(function(res){
		this.msg = res.data;
	})
}

jsonp
这个支持跨域,其他的不支持,上面的get方法不支持跨域
jsonp: function(){
	this.$http.jsonp("http://www.a.com/a.js").then(function(res){
		this.msg = res.data;
	})


4-2 Vue-Resource使用(下) (08:42)

全局拦截器,所有的请求都会先执行下面的操作,然后进行正常的操作
mounted:function(){
	Vue.http.interceptors.push(function(request, next){
		console.log("request init");
		next(function(response){
			console.log("response init");
			return response;
		})
	})
},

执行过程,在请求前先执行的内容
request init 
get请求
response init 


全局路径,不用在后面每个请求上都写全路径,而是在全局路径的基础上进行请求,能少写些字
 new Vue({
        http:{
            root:"www.abc.com/test"
        }


4-3 axios基础介绍 (18:13)
	https://ykloveyxk.github.io/2017/02/25/axios%E5%85%A8%E6%94%BB%E7%95%A5/

get方法
get: function(){
	axios.get("../package.json",{
		params:{
			userId: "999",
		},
		headers:{
			token: "jack"
		}
	}).then(res=>{
		this.msg = res.data;
	}),catch(function(error){
		console.log("error:"+error);
	})
}

post方法
post: function(){
	axios.post("../package.json",{
		userId: "888"
	},{
		headers:{
			token: "tom"
		}
	}).then(res=>{
		this.msg = res.data;
	}),catch(function(error){
		console.log("error:"+error);
	})
}

http方法
http: function(){
	axios({
		url: '../package.json',
		method: 'post',
		data: {
			userId: '101',
		},
		params:{
			userId: '102',
		},
		headers:{
			token: "tom",
		}
	}).then(res=>{
		this.msg = res.data;
	}),catch(function(error){
		console.log("error:"+error);
	})
}

全局拦截器,所有的请求都会先执行下面的操作,然后进行正常的操作
mounted:function(){
	axios.interceptors.request.use(function(config){
		console.log('request init');
		return config;
	})
	axios.interceptors.response.use(function(response){
		console.log('response init');
		return response;
	})
},







第5章 ES6常用语法
5-1 ES6简介 (01:48)

2009年es5出现
2015年es6出现



5-2 ES6常用命令 (36:37)
var 可以先使用,后定义,函数级的作用域。let,const必须先定义,后使用,块级作用域
<body>
    <h2>es6演示</h2>
    <div id="log" class="log"></div>
    <script>
        console.log("a"+a);
        var a=1;
        console.log("b"+b);
        let b=2;
    </script>
</body>

模板语言:方便将变量名放到字符串中
let userName = 'jack';
var a = `i am ${userName}`

es6新增默认参,函数默认参数,和py一样
function(flag=true){
	...
}

箭头函数的作用域和外层函数的作用相同,会省去很多的麻烦
如果是普通的函数,返回给对象this不是外部函数里面的this,需要重新赋值给外部的this。而箭头函数作用域是一样的,直接赋值就可以
http: function(){
	var _this=this
	axios({
		url: '../package.json',
		method: 'get',
	}).then(function(res){
		_this.msg = res.data;
	})
}

如果是箭头函数
http: function(){
	axios({
		url: '../package.json',
		method: 'get',
	}).then(res=>{
		this.msg = res.data;
	})
}



5-3 拓展参数讲解 (15:48)
下面使用es6的语法,m是可变参数,和py差不多,然后还使用箭头函数
<script>
	let sum = (...m)=>{
		let total = 0;
		for (var i of m){
			total += i;
		}
		console.log(`total:${total}`);
	};
	sum(1,2,3);
</script>


5-4 Promise讲解 (14:36)
为了解决多级嵌套回调的问题
先跳过,用到再说


5-5 ES6模块化开发讲解 (11:48)
es6的import和export使用


5-6 AMD、CMD、CommonJS和ES6差异 (09:52)



第6章 商品列表模块实现
6-1 商品列表组件拆分 (22:11)

组件可以复用,可以复用的功能放到组件里面
页面是单独一个功能

所有的静态资源都在resource目录里面
src/assets目录偏向于存放组件的静态资源
static目录偏向于存放业务方面的静态资源

static目录对应的url位置为:localhost:8080/static,也就是说说对应的根目录下的static

当组件的变量名和名字相同的时候,后面的可以省略
components:{
	NavHeader,
	NavFooter: NavFooter,
	NavBread,
}

插槽和py里面的自定义是一样的意思
公共组件为
<nav class="nav-breadcrumb">
	<a href="/">Home</a>
	<slot name="bread"></slot>
	<slot name="b"></slot>
</nav>
然后每个不同的页面在这个组件中显示的字符不同,直接在不同页面里面写入自定义的名字就行,然后每个页面显示出来的就不同
<nav-bread>
	<span slot="bread">goods</span>
	<span slot="b">test</span>
</nav-bread>



6-2 商品列表数据渲染实现 (16:22)
当build和config目录里面的文件修改后,需要重启服务!!!

这节主要是模拟一个简单的服务端,获取json数据
这一节先跳过,和后面的9.2节一块看



6-3 实现图片懒加载 (17:53)
这一节先跳过,和后面的9.2节一块看



第7章 Node.js基础
7-1 Linux环境下配置Node环境 (14:03)
各个平台的安装过程


7-2 创建http Server容器 (27:24)
一个简单的demo来演示服务端


7-3 通过node加载静态页面 (19:34)
也是服务端的演示


7-4 搭建基于Express框架的运行环境 (18:45)
安装express generator生成器
通过生成器生成框架
npm install -g express-generator
这里将前后端分为不同的目录来进行试验
前端代码目录:front-end
后端代码目录:back-end

express back-end  通过express生成back-end项目目录,里面默认会包含几个文件夹
npm install 安装依赖 
npm run start 启动服务
访问web界面:http://localhost:3000/
当修改了项目文件,需要重启服务才能生效

npm install ejs --save

后面修改了一些配置,需要看具体的文件

未经允许不得转载:江哥架构师笔记 » vue学习:Vue2.0 / Node.js / MongoDB 打造商城系统-1-7章

分享到:更多 ()

评论 抢沙发

评论前必须登录!