不懂甚么是小程序流程_node vue项目开发之前后端

node vue项目开发之前后端分离实战记录       其实基于vue.js+node.js构建的开源博客系统有很多,下面这篇文章主要给大家介绍了关于node vue项目开发之前后端分离的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友下面来一起看看吧。

前言

本文主要介绍了关于node vue前后端分离的相关资料,分享出来供大家参考学习,下面随着小编来一起学习学习吧。

node vue项目开发

最近看了近一周的vue开发,有诸多感触,我之前接触过react、angular所以特别想学学久仰大名的vue。学习半天以后发现,接触到的东西多了,学习起来就是容易很多,vue的指令我能个联想到angular的指令,vue组件化设计类似于react的组件化设计,包括一些router的设置跟react里的路由或者nodejs里的路由都差不多,vuex更是根据redux、flux改写的,虽然我还搞不太明白怎么用,至于vue的模板渲染,跟expres渲染ejs没有太大的区别。使用vue可以完全脱离jq,虽然我还没感受到不用jq有什么神奇的赶脚,但是我觉得这种双向数据绑定的还是挺方便的,此文档用来记录我学习vue的一些新的知识和想法。

指令
v-bind 主要用于动态绑定DOM元素属性,即元素属性实际的值是 有vm实例中的data属性提供的。 v-model 主要对表单元素进行双向数据绑定,在修改表单元素的值时,实例vm中对应的vm对应的属性也同时更新。 v-if,v-show,v-else这几个指令来说明模板和数据间的逻辑关系
v-if和v-else的作用是根据数值来判断是否输出该dom元素,以及包含的子元素。
eg:
div v-if="yes" yes /div 当vm实例中的data.yes=true时,模板引擎会编 译这个dom节点,输出 div yes /div 值得注意的是:v-else要紧跟v-if否则不起作用。
v-show与v-if的效果差不多,都是通过判断真假显示内容,唯一不同的是,v-show不显示的时候是display:none,也就是保留了dom节点,但是v-if不会。 v-for 用于列表渲染,可以循环遍历数组和对象,注意v-for="b in 10"目前指的是1-10的迭代 v-on 事件绑定,简写@: v-text p v-text="msg" p 相当于innerText,与{{msg}}相比,避免了闪现的问题。 v-HTML 类似于innerHTML,也可以避免闪现 v-el 这个指令相当于给dom元素添加了个索引,例如 div v-el="demo" this is a test /div ,如果想获取当前dom里的值,可以vm.$els.demo.innerText ,注意:html不区分大小写,驼峰式的写法会自动转成小写,可以通过-的方式转换成大写。 v-ref 与v-el类似 通过vim.$refs访问 v-pre 跳过编译这个元素 v-cloak 感觉没啥用 v-once新增内置指令,用于标明元素或组件只渲染一次。

模板渲染

1、v-for 主要用于列表渲染,讲根据接受到的数组重复渲染v-for绑定到的dom元素及内部子元素,并可以通过设置别名的方式,获取数组内数据渲染到节点中。

eg:

 ul v-for="item in items" 
 li {{item.title}} /li 
 li {{item.description}} /li 
 /ul 

2、v-for内置$index变量,可以在调用v-for的时候调用,例如 li v-for="(index,item) in items" {{index}}-{{$index}} /li

3、修改数据

直接修改数组可以改变数据

不能直接改变数组的情况

  1.vm.items[0]={} , 这种情况下无法修改,解决:vm.item.$set(0,{})或者vm.$set('item[0]',{})

  2.vm.item.length=0

4、v-for遍历对象,可以使用(key,value)的形式自定义key变量。

 li v-for="(key,value)" in objectDemo 
 {{key}}---{{$key}}:{{vue}}
 /li 

5、template标签

用来作为模板渲染的跟节点,但是渲染出来不存在此节点

事件绑定与监听

v-on可以绑定实例属性methods中的方法作为事件的处理器,v-on:后面可以接受所有的原生事件名称。

简写 @: 可以绑定methods函数,也支持内联js,但是仅限一个语句。 绑定methods函数和内联js都可以获取原生dom元素,event. 绑定多个事件时,为顺序执行。

ui组件

使用指南

安装

npm pm install element-ui --save-dev

引入文件main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI, { size: 'small' })

使用

在components文件夹下新建一个页面,从找到自己喜欢的组件,比如走马灯 Carousel.vue 把代码复制到这个页面

在需要的此组件的文件下,比如APP.vue里

import Carousel from './components/Carousel'
export default {
 name: 'app',
 components: { //components加s
 Carousel: Carousel
}

在模板里载入组件

 template 
 div id="app" 
 Carousel /Carousel 
 img src="./assets/logo.png" 
 router-view/ 
 /div 
 /template 

这样就可运行了

前后端分离

习惯了用node做全栈开发,现在用vue-webpack做前端开发,node做后端开发也挺爽的,前后端实现了分离。

启动后端接口

cd back
cnpm install
npm run dev

启动前端服务器

cd front
cnpm install
npm start

进入登录页面,点击登录,控制台打印访问成功的信息,并成功跳转到helloworld页面

前后端通信

vue-resource

安装vue-resource 并在main.js中引用

import VueResource from 'vue-resource'
Vue.use(VueResource)

在config/index.js 配置 proxyTable代理服务器

proxyTable: {
 '/api/**': {
 target: 'api': '/api'
}

使用

this.$http.get('api/apptest')
 .then((response) = {
 // 响应成功回调
 console.log(response)
 }).catch(e = {
 // 打印一下错误
 console.log(e)
 }

缺点:在开发环境下没有问题,但是在生产环境下请求后端接口不成功

axios

首先配置axios,在src下新建一个http.js

import axios from ‘axios'
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'x-www-form-urlencoded'
export default axios

在main.js中引入

import axios from './http'
Vue.prototype.axios = axios
new Vue({
 el: '#app',
 router,
 axios,
 template: ' App/ ',
 components: { App }
})

使用

get方法

login () {
 // 获取已有账号密码
 this.axios.get('/apptest')
 .then((response) = {
 // 响应成功回调
 console.log(response)
 // this.$router.go({name: 'main'})// 不管用
 this.$router.push({name: 'HelloWorld'})
 }).catch(e = {
 // 打印一下错误
 console.log(e)
}

post方法

register () {
 console.log(this)
 // 获取已有账号密码
 let params = {
 user: .account,
 password: .password,
 directionId: .directionId
 this.axios.post('/signup', params)
 .then((response) = {
 // 响应成功回调
 console.log(response)
 }).catch(e = {
 // 打印一下错误
 console.log(e)
}

生产环境路径问题

在生产环境下发现打包以后路径不对,修改config下的index.js

build: {
 // 
 index: path.resolve(__dirname, '../'),
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './', //原来是 assetsPublicPath: '/'

源码位置:

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对凡科的支持。