当前位置：首页 > 资讯 > 技术文档

node vue项目开发之前后端分离实战记录

时间：2021-02-14 08:22 编辑：来源：阅读：
扫一扫，手机访问

摘要：node vue项目开发之前后端分离实战记录

[b]前言[/b] 本文主要介绍了关于node vue前后端分离的相关资料，分享出来供大家参考学习，下面随着小编来一起学习学习吧。 [b]node vue项目开发[/b] 最近看了近一周的vue开发，有诸多感触，我之前接触过react、angular所以特别想学学久仰大名的vue。学习半天以后发现，接触到的东西多了，学习起来就是容易很多，vue的指令我能个联想到angular的指令，vue组件化设计类似于react的组件化设计，包括一些router的设置跟react里的路由或者nodejs里的路由都差不多，vuex更是根据redux、flux改写的，虽然我还搞不太明白怎么用，至于vue的模板渲染，跟expres渲染ejs没有太大的区别。使用vue可以完全脱离jq，虽然我还没感受到不用jq有什么神奇的赶脚，但是我觉得这种双向数据绑定的还是挺方便的，此文档用来记录我学习vue的一些新的知识和想法。 [b]指令[/b] [list] [*]v-bind 主要用于动态绑定DOM元素属性，即元素属性实际的值是有vm实例中的data属性提供的。[/*] [*]v-model 主要对表单元素进行双向数据绑定，在修改表单元素的值时，实例vm中对应的vm对应的属性也同时更新。[/*] [*]v-if,v-show,v-else这几个指令来说明模板和数据间的逻辑关系 v-if和v-else的作用是根据数值来判断是否输出该dom元素，以及包含的子元素。 eg: [code]<div v-if="yes">yes</div>[/code] 当vm实例中的[code]data.yes=true[/code]时，模板引擎会编译这个dom节点，输出 [code]<div>yes</div>[/code]值得注意的是：v-else要紧跟v-if否则不起作用。 v-show与v-if的效果差不多，都是通过判断真假显示内容，唯一不同的是，v-show不显示的时候是[code]display:none[/code],也就是保留了dom节点，但是v-if不会。[/*] [*]v-for 用于列表渲染，可以循环遍历数组和对象,注意[code]v-for="b in 10"[/code]目前指的是1-10的迭代[/*] [*]v-on 事件绑定，简写@:[/*] [*][code]v-text <p v-text="msg"><p>[/code]相当于innerText,与[code]{{msg}}[/code]相比，避免了闪现的问题。[/*] [*]v-HTML 类似于innerHTML,也可以避免闪现[/*] [*]v-el 这个指令相当于给dom元素添加了个索引，例如[code]<div v-el="demo">this is a test </div>[/code] ,如果想获取当前dom里的值,可以[code]vm.$els.demo.innerText [/code],注意：html不区分大小写，驼峰式的写法会自动转成小写，可以通过-的方式转换成大写。[/*] [*]v-ref 与v-el类似通过[code]vim.$refs[/code]访问[/*] [*]v-pre 跳过编译这个元素[/*] [*]v-cloak 感觉没啥用[/*] [*]v-once新增内置指令，用于标明元素或组件只渲染一次。[/*] [/list] [b]模板渲染[/b] 1、v-for 主要用于列表渲染，讲根据接受到的数组重复渲染v-for绑定到的dom元素及内部子元素，并可以通过设置别名的方式，获取数组内数据渲染到节点中。 [b]eg:[/b]

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

2、v-for内置$index变量，可以在调用v-for的时候调用，例如[code]<li v-for="(index,item) in items">{{index}}-{{$index}}</li>[/code] 3、修改数据直接修改数组可以改变数据不能直接改变数组的情况 1.[code]vm.items[0]={} [/code], 这种情况下无法修改，解决：[code]vm.item.$set(0,{})[/code]或者[code]vm.$set('item[0]',{})[/code] 2.[code]vm.item.length=0[/code] 4、v-for遍历对象，可以使用（key,value）的形式自定义key变量。

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

5、template标签用来作为模板渲染的跟节点，但是渲染出来不存在此节点 [b]事件绑定与监听[/b] v-on可以绑定实例属性methods中的方法作为事件的处理器，v-on:后面可以接受所有的原生事件名称。 [list] [*]简写 @:[/*] [*]可以绑定methods函数，也支持内联js，但是仅限一个语句。[/*] [*]绑定methods函数和内联js都可以获取原生dom元素，event.[/*] [*]绑定多个事件时，为顺序执行。[/*] [/list] ui组件 [url=http://element.eleme.io/#/]饿了吗[/url] [b]使用指南[/b] 安装

npm install cnpm 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文件夹下新建一个页面，从[url=http://element.eleme.io/#/]饿了吗[/url]找到自己喜欢的组件，比如走马灯 [code]Carousel.vue [/code]把代码复制到这个页面在需要的此组件的文件下，比如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>

这样就可运行了 [b]前后端分离[/b] 习惯了用node做全栈开发,现在用vue-webpack做前端开发，node做后端开发也挺爽的，前后端实现了分离。启动后端接口

cd back
cnpm install
npm run dev

启动前端服务器

cd front
cnpm install
npm start

进入登录页面，点击登录，控制台打印访问成功的信息,并成功跳转到helloworld页面 [b]前后端通信[/b] vue-resource 安装vue-resource 并在main.js中引用

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

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

proxyTable: {
 '/api/**': {
 target: 'http://localhost:3000',
 pathRewrite: {
 '^/api': '/api'
 }
 }
}

使用

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

缺点：在开发环境下没有问题，但是在生产环境下请求后端接口不成功 [b]axios [/b] 首先配置axios,在src下新建一个http.js

import axios from ‘axios'
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.post['Content-Type'] = 'application/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 }
})

[b]使用[/b] 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: this.userinfo.account,
 password: this.userinfo.password,
 directionId: this.userinfo.directionId
 }
 this.axios.post('/signup', params)
 .then((response) => {
 // 响应成功回调
 console.log(response)
 }).catch(e => {
 // 打印一下错误
 console.log(e)
 })
}

[b]生产环境路径问题[/b] 在生产环境下发现打包以后路径不对，修改config下的index.js

build: {
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'),

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

源码位置：[url=https://gitee.com/react-module/node-vue]https://gitee.com/react-module/node-vue[/url] [b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程素材网的支持。

全部评论(0)

上一篇：nodejs对express中next函数的一些理解
下一篇：46 个非常有用的 PHP 代码片段

资讯排行榜
更多>>