MayMayJn
MayMayJn

vue全家桶+node+mongodb商城项目小结

配置文件

  • index.js
  • webpack.base.conf.js

vue.js基础语法

  • mustache语法：{{msg}}
  • html赋值：v-html=""
  • 绑定属性：v-bind:id=""
  • 使用表达式：{{ ok?'Yes:No' }}
  • 文本赋值：v-text=""
  • 指令：v-if=""条件判断
  • 过滤器：{{ message | capitalize }}和v-bind:id="rawId | formatId"

class和style绑定

  • 对象语法：v-bind:class="{'active':isActive, 'text-danger':hasError}"
  • 数组语法：v-bind:class="[activeClass, errorClass]"
    data:{
    activeClass:'active',
    errorClass:'text-danger'
    }
  • style绑定-对象语法：v-bind:style=""

条件渲染

  • v-if
  • v-else
  • v-else-if
  • v-show
  • v-cloak

v-if如果条件不成立，元素不渲染
v-show如果条件不成立，渲染，置display:none
v-cloak 如果页面刷新的太快，导致有些页面的元素没有加载出来，v-cloak可以同步隐藏html代码

事件处理器

  • v-on:click="greet" 或 @click="greet"
  • v-on:click.stop 阻止事件冒泡
    v-on:click.stop.prevent 阻止默认事件
    v-on:click.self 给这个div绑定事件的对象本身绑定事件？
    v-on:click.once给这个事件绑定一次
  • v-on:keyup.enter

路由

import HelloWorld from '@/components/HelloWorld' @ 表示 src 目录

配置路由的index.js中的路由模式mode
mode:'hash'哈希模式。url中带#，例如 http://localhost:8888/#/goods/4556/user/admin
mode:'history'浏览器的history模式。url中没有#，例如 http://localhost:8888/goods/4556/user/admin

嵌套路由

路由index.js

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList'
import Title from '@/views/Title'

Vue.use(Router)

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

views/GoodsList.vue

<template>
  <div>
      <p>这是商品列表页p>
      <router-link to="/goods/title">标题router-link>
      <div>
          <router-view>router-view>
      div>
  div>
template>
<style>

style>
<script>
export default {
  data() {}
}
script>

views/Title.vue

<template>
  <div>
      <p>这是商品标题组件p>
  div>
template>
<style>

style>
<script>
export default {
  data() {}
}
script>

编程路由
通过js来实现页面的跳转

$router.push("name")
$router.push({path:"name"})
$router.push({path:"name?a=1234"})或$router.push({path:"name",query:{a:1234}})

… …

AMD CMD CommonJS和ES6的对比

  • AMD是RequireJS在推广过程中对模块定义的规范化产出。异步模块定义，特点：依赖前置
define(['package/lab'],function(lab){
    function foo(){
        console.log("hello world")
    }

    return {
        foo:foo
    };
});
  • CMD是SeaJS在推广过程中对模块定义的规范化产出。同步模块定义，特点：即用即调
define(function(require, exports, module){
    var $ = require("jquery")
    var Spinning = require("./spinning")
});
  • CommonJS规范 - module.exports 在服务端使用，在服务端进行模块划分
exports.area = function (r) {
    return Math.PI * r * r;
};

exports.circumference = function (r) {
    return 2 * Math.PI * r;
};
  • ES6特性 export/import
export default {
  name: 'HelloWorld',
  data () {
    return {
      num:10,
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    increment () {
      this.num++;
    },
    decrement () {
      this.num--;
    }
  },
  components:{
    Counter
  }

}

node.js

  • http
  • module
  • path
  • url util …

其他

express的router通过get与POST传递参数时，后端获取参数的方式的区别

  • GET 通过req.param("param1")的方式获取
  • POST 通过req.body.param1的方式获取

前端传参的区别

  • GET
axios.get('/path',{
  params:{
    key:value
  }
}).then((res)=>{

  });
  • POST
axios.post('/path',{
  key:value
}).then((res)=>{

  });

踩坑

  • js对象的语法易错

是

var param = {
    userName: req.body.userName,
    userPwd: req.body.userPwd
}

不是

var param = {
    userName = req.body.userName,
    userPwd = req.body.userPwd
}
  • 请求的回调函数参数的顺序是 (req, res, next),不是(res, req, next)

错误总结

Error: spawn cmd ENOENT

很明显了，错误信息都给出了 cmd 关键词，我一开始一直以为是node的版本的问题，特地把版本降到了7.0，错误的参考了github上关于这个问题的讨论 升级Node.js 8 之后，npm run dev 会出现问题
为此我还学会了如何卸载高版本的node，再装回旧版本的。要卸载高版本的node,有一个办法就是再重新点开这个版本的node安装包，在安装选项中选择remove就可以卸载当前的node版本了，之后再装其他低版本的node就都没问题了
浪费了我很多时间，最后终于找到了解决办法 Get ‘spawn cmd ENOENT’ when try to build Cordova application (event.js:85) 我按照链接里的方法将C:\Windows\System32添加到环境变量path中就好了，点赞量高的答案果然很有用！

Vuex

专门为vue.js应用程序开发的状态管理模式
构建中大型单页面程序时，Vuex能够更好的帮助我们在组件外部统一管理状态

核心概念
State 唯一的数据源、载体
Getters 通过getters可以派生出一些新的状态
Mutations 唯一可以提交和改变状态的，Vuex的store中的状态的唯一提交方法
Actions 提交的是mutation，而不是直接变更的状态，可以包含任意异步操作
Modules 面对复杂的应用程序，当管理的状态比较多时，需要将Vuex的store对象分割成模块(modules)

线上部署

后端和前端代码分开。使用nginx实现接口转发，不会跨域
部署到线上时如果采用文件夹的形式，注意修改路径配置config/index.js/中的assetsPublicPath为代码存放的文件夹，否则会找不到资源文件的路径

课程资源

课程资源下载链接

你可能感兴趣的:(web前端)