论一次自学Vue的整体过程

基于首次整理Vue相关知识，所以准备从安装到项目实现整体介绍

  • 环境安装（node）
    1. 安装node.js 下载地址：(http://www.runoob.com/nodejs/nodejs-install-setup.html)
    2. 基于node.js,利用淘宝npm镜像安装相关依赖
      在cmd里直接输入：npm install -g cnpm –-registry=https://registry.npm.taobao.org，回车，等待安装…（之后可以用cnpm代替npm下载依赖，不需要翻墙且速度较快）
    3. 安装全局vue-cli脚手架,用于帮助搭建所需的模板框架，在cmd里
      1)输入：cnpm install -g vue-cli，回车，等待安装…
      2).输入：vue，回车，若出现vue信息说明表示成功
    4. 创建项目
      在cmd里输入：vue init webpack vue_test(项目文件夹名)，回车，等待一小会儿
    5. 安装依赖，在cmd里
      1).输入：cd vue_test（项目名），回车，进入到具体项目文件夹
      2).输入：cnpm install，回车，等待一小会儿
      回到项目文件夹，会发现项目结构里，多了一个node_modules文件夹（该文件里的内容就是之前安装的依赖）
    6. 测试环境是否搭建成功
      方法1：在cmd里输入：cnpm run dev
      方法2：在浏览里输入：localhost:8080(默认端口为8080)

参考安装：http://www.runoob.com/nodejs/nodejs-install-setup.html

首先介绍整个项目涉及到的技术点：

  • vue全家桶

    由于学过angular，所以入手会更加简单，与angular不同的是
    vue更轻量级，属性和语法较人性化，适合单页面应用（SPA），由个人维护

    1. vue.js（基础语法，如绑定属性）
    2. vue-resource（后台交互，发送http请求）
    3. vue-axios（后台交互，发送axios内自封装的post get等请求）
    4. vue-router（单页面好用的框架，使用其标签<router-link></router-link><router-view></router-view>进行页面渲染）
    5. vuex（用来管理全局状态的，适用在header等公共部分标记如用户登录状态）

  • ES6

    不同于以往的JavaScript，ES6语法将代码格式成函数的形式，定义data，函数都是以一种(){}形式返回

    1. let const（定义变量）
    2. 字符串、对象、数组、函数的结构（如 数组长度 和 定义内容不符时，自动处理index和值相互匹配对应，减少了定义疏忽带来的错误）
    3. Rest参数、函数扩展（针对函数参数 ...可以模糊匹配或定义默认值）
    4. 箭头函数（大致结构 (参数)=>{函数代码}）
    5. Promise（常用的是链式调用 vue中发送请求的.then()）
  • Node（JavaScript运行环境）
    1. Node入门（同样适用js编写，配置路由，cnpm/npm下载插件，node直接启动server文件）
    2. Express框架（类似vue的vue-cli框架，创建一套server服务框架）

  • Mongo

    与MySQL等数据库的区别：（会把针对一个用户的信息都提取，作为object来管理）
    MySQL：用户表，购物车表，订单表
    Mongo：用户表（购物车信息，订单信息）

    1. Mongo的入门：（增删改查操作）
    2. 安装：Windows
      安装流程： http://www.runoob.com/mongodb/mongodb-window-install.html
      可视化工具MongoVue：链接：http://pan.baidu.com/s/1gfEgPyz 密码：a8qf

vue的基础语法：
v-bind:属性=”属性值” class
v-on:方法=”方法名” click

父子组件之间的值传递 点击事件的传递处理
子组件接受父组件的值：props:接受值
父组件传递值： $emit(“方法”) 方法在子组件中触发

路由：单页面（改变内容不变结构）使用前端路由
【四种：动态路由匹配、嵌套路由、编程式路由、命名路由和命名视图】
1./user/:username/post/:post_id (hash和history params接收参数)
2.同一页面，不同菜单—嵌套的路由以查看title和img为例，注意的是router-link to=”绝对路径”–用来生成a标签
3.通过方法控制：$router.push（路径/路径对象（{}）/路径对象传参（query接参数{}））
4.对router-link 与router-view进行命名绑定，注意v-bind:to=”对象名“，可以自动转换名字并接收 对view进行命名，components进行筛选显示

vue-resource≈jQuery（ajax）

1.七种发送请求，this.$http.get(“请求地址”,{params：{userId：101},headers：{}}).then(func1,func2); delete jsonp
post（”请求地址”,{userId：101},{headers：{}}）.then() ……

2.拦截 —-全局发送请求的拦截，可以做before处理

mounted:func{
    Vue.http.interceptors.push(function(request,next){
        //初始化request
        next(function(response){
            //response初始化
        }
    });
}

2.1.定义全局的http：{root：“路径”}
2.2.

$http请求 基本配置，url method params headers：{token：} before：func .then(res=>{})

3.axios≈this.$http
有同样的请求，参数对象类似，
有mounted拦截，

axios.interceptors.request.user(func(conf){})   
axios.interceptors.response.user(func(res){})

唯一直接可以使用axios作为全局变量，原因引入了axios.js文件

——————————————————————————>
字符串拼接==“（模板语言）
var 函数级作用域
let（变量） const（常量） 块级作用域

函数参数初始值
箭头函数（this作用域不混乱）
${变量名}

数组的解构：分解拆分（yiyi对应） [a,b,c]=[2,4,8]=>a=2,b=4,c=8
字符串解构成数组 [a,b,c]=”vue”=>a=v,b=u,c=e
对象解构成数组 [a,b,c]=obj……

MongoDB（上述介绍的分布式存储）

配置目录（数据库数据存储及日志打印）：

这里写图片描述

  运行27017端口：mongod --dbpath d:\MongoDB\data
  运行28017端口：mongod --config d:\MongoDB\etc\mongo.conf --httpinterface
  数据库、表的增删改查find drop update insert

mongo.conf文件：
#数据库路径
dbpath=e:\MongoDB\data\
#日志输出文件路径
logpath=e:\MongoDB\logs\mongo.log
#错误日志采用追加模式，配置这个选项后mongodb的日志会追加到现有的日志文件，而不是从新创建一个新文件
logappend=true
#启用日志文件，默认启用
journal=true
#这个选项可以过滤掉一些无用的日志信息，若需要调试使用请设置为false
quiet=false
#端口号 默认为27017
port=27017
#指定存储引擎（默认先不加此引擎，如果报错了，大家在加进去）
storageEngine=mmapv1

注意：遇到的大坑 就是MongoVue客户端不显示数据库表！！！所以conf文件中必须配置mmapv1

node 的三种运行方式①shell ②IDE（WebStorm）的run（配置）③pm2（全局安装，线程运行，打包后推荐）

后台server
前后端 数据渲染：安装插件（全局cnpm i mongoose）
后台（模型->路由配置->链接数据库、处理请求）
1. 创建 模型models-goods ：

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var productSchema = new Schema({
  "productId":{type:String},
  "productName":String,
  "productPrice":Number,
  "productImage":String,
  "productNum":String,
  "checked":String
});
//默认在数据库中+s查找
module.exports = mongoose.model("Good",productSchema);

2.创建 routes-goods并连接数据库（打印数据） 

var Goods = require('../models/goods');//模型表
var mongoose = require('mongoose');
var express = require('express');//node框架获取路由
var router = express.Router();

//连接数据库
mongoose.connect('mongodb://127.0.0.1:27017/imoocmall');

mongoose.connection.on("connected",function () {
  console.log("mongodb is connected");
});

mongoose.connection.on("error",function () {
  console.log("mongodb is fail");
});

mongoose.connection.on("disconnected",function () {
  console.log("mongodb is disconnected");
});
router.get("/list",function (req, res, next) {
  //测试 res=response向前台写数据
  res.send("hello,goods list.");
  //req=request 从前台接收的
  let page = parseInt(req.param("page"));
  //自定义参数
  let params = {};
  //根据参数筛选
  let goodsModel = Goods.find(params);
  //执行返回结果
  goodsModel.exec(function (err, doc) {
  }
});

注意：models和routes均需module.exports，保证在app.js中能获取不为空
前台：注释虚拟mock数据，修改跨域为本机3000，最后匹配数据库相应字段实现渲染
price正序 倒序的查找，价格的排序，以及分页渲染

3.app添加goods路径

var ejs = require('ejs');

var index = require('./routes/index');
var users = require('./routes/users');
var goods = require('./routes/goods');

var app = express();

// view目录拼接
app.set('views', path.join(__dirname, 'views'));
//文件类型
app.engine('.html',ejs.__express);
app.set('view engine', 'html');

//注入路由
app.use('/', index);
app.use('/users', users);
app.use('/goods',goods);

4.关于登录 和 登出：

/*登录 userId和userName存储*/
res.cookie("userName",doc.userName,{
          path:'/',
          maxAge:1000*60*60//一个小时，1000ms ms为单位
        });
/*登出：userId的删除*/
res.cookie("userName","",{
          path:'/',
          maxAge:-1
        });

5.检查登录checkLogin:

if(req.cookied.userId)

6.server ->app.js中的路由拦截（要在上述注入路由前拦截）:

app.use(function (req, res, next) {
if(req.cookies.userId){
    next();
  }else {
    if(req.originalUrl=='/users/login'||req.originalUrl=='/users/logout'||req.originalUrl.indexOf('/goods/list')>-1){
      next();
    }else {
      res.json({
        status:"1",
        msg:"当前未登录",
        result:""
      })
    }
}

7.mounted(){}组件渲染后执行的（生命周期的开始）

computed:{
          checkAllFlag(){}   
          //checkAllFlag相当于在data中定义的属性，computed起实时计算作用
}
巧妙运用计算方法，设置计算商品价钱，计算地址条数……

8.edit购物车：node端 

User.update({userId:userId,"cartList.productId":productId},
            {
                "cartList.$.productNum":productNum,
                "cartList.$.checked":checked,
            },function(err,doc){
            })

注意：实现了对数据库的数据更新，$为二级目录意思

9.删除购物车：node端 

User.update({userId:userId},{$pull:{
            "cartList":{"productId":productId"}},function(err,doc){
            })

10.axios 有get post请求
get:后台用req.param(“productId”)
post:后台用req.body.productId

最後希望圍觀的大神們輕拍，哈哈哈哈~

# node.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue