ノードの Vue プロジェクトでフロントエンドとバックエンドの分離を実現する方法

実際、vue.js+node.js をベースに構築されたオープンソースのブログ システムは数多くありますが、次の記事では主に、node vue プロジェクトの開発前のバックエンド分離に関する関連情報を紹介します。サンプル コードを通じて詳細を確認できます。誰の勉強や仕事にも一定の参考と学習の価値があるので、必要な方は以下を参照してください。

はじめに

この記事では主にnode vueのフロントエンドとバックエンドの分離に関する関連情報を紹介します。皆さんの参考と勉強のために共有します。

node vue プロジェクト開発

最近、vue の開発を 1 週間近く見ていて、これまでに反応や angular に触れてきたことがたくさんあるので、特に vue を学びたいと思っています。昔から有名です。長い間勉強した結果、Vue の命令と Angular の命令を関連付けることができるため、学習がはるかに簡単であることがわかりました。 React はルーターの設定も含めて React も同様で、vuex は redux や flux をベースに書き換えられていますが、vue のテンプレートレンダリングに関しては大したことはありません。 Express Rendering EJS とは異なります。 vue を使用すると、jq から完全に離れることができます。jq を使用しないことによる魔法のような利点は感じませんでしたが、このドキュメントは、vue について学んだいくつかの新しい知識を記録するために使用すると非常に便利だと思います。アイデア。

コマンド

• v-bind は、主に DOM 要素属性を動的にバインドするために使用されます。つまり、要素属性の実際の値は、vm インスタンスの data 属性によって提供されます。

• v-model は主に form 要素に対して双方向のデータバインディングを実行します。form 要素の値が変更されると、インスタンス vm 内の対応する vm の対応する属性も同時に更新されます。

• テンプレートとデータ間の論理関係を示す v-if、v-show、v-else 命令
  v-if および v-else の機能は、数値に基づいて DOM 要素およびそれに含まれるサブ要素を出力するかどうかを決定することです。
  例:
  <p v-if="yes">yes</p> 当vm实例中的data.yes=true时，模板引擎会编 译这个dom节点，输出 <p>yes</p> 注目に値します: v-else は v-if に厳密に従わなければなりません。そうしないと機能しません。
  v-show と v-if の効果は似ていますが、どちらも true か false を判断してコンテンツを表示します。唯一の違いは、v-show が表示されない場合は display:noneであることです。 > これは、dom ノードは保持されますが、v-if は保持されないことを意味します。 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元素添加了个索引，例如<p v-el="demo">this is a test </p> ,如果想获取当前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

。

v-text <p v-text="msg"><p> は innerText と同等であり、{ {msg }} と比較すると、点滅の問題が回避されます。

• v-el このコマンドは、<p v-el= などの dom 要素にインデックスを追加するのと同等です。 [demo"> これはテストです </p>。現在の dom の値を取得したい場合は、vm.$els.demo.innerText を実行できます。次の点に注意してください。 html は大文字と小文字を区別しません。キャメルケースは自動的に小文字に変換され、- によって大文字に変換できます。

• v-ref は v-el に似ており、vim.$refs を通じてアクセスします 🎜🎜🎜🎜v-pre はこの要素のコンパイルをスキップします 🎜🎜🎜🎜v-cloak は役に立たないように感じます🎜🎜 🎜 🎜v-once は、要素またはコンポーネントが 1 回だけレンダリングされることを示す組み込みディレクティブを追加しました。 🎜🎜

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

npm install cnpm install element-ui --save-dev

ui组件 饿了吗

使用指南

安装

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文件夹下新建一个页面，从饿了吗找到自己喜欢的组件，比如走马灯 Carousel.vue 把代码复制到这个页面

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

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

在模板里载入组件

<template>
<p id="app">
 <Carousel></Carousel>
 <img src="./assets/logo.png">
 <router-view/>
</p>
</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: 'http://localhost:3000',
 pathRewrite: {
 '^/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 = '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: &#39;<App/>&#39;,
 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: 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)
 })
}

生产环境路径问题

在生产环境下发现打包以后路径不对，修改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: '/'

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在JS中如何实现网页自动秒杀点击（详细教程）

在node中如何实现http小爬虫

在angular2中有关Http请求原理（详细教程）

使用VueAwesomeSwiper容易出现的问题？

使用Node.js爬虫如何实现网页请求

如何使用VUE2.X过滤器

以上がノードの Vue プロジェクトでフロントエンドとバックエンドの分離を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。