노드의 Vue 프로젝트에서 프런트엔드와 백엔드 분리를 달성하는 방법

실제로 vue.js+node.js를 기반으로 구축된 오픈소스 블로그 시스템이 많이 있는데, 다음 글에서는 주로 node vue 프로젝트 개발 전의 백엔드 분리 관련 정보를 소개하고 있습니다. 샘플 코드를 통해 자세히 알아보세요. 모든 사람의 학습이나 작업에는 특정 참고 자료와 학습 가치가 있습니다. 필요한 친구는 아래를 방문하여 살펴볼 수 있습니다.

머리말

이 글은 주로 node vue의 프론트엔드와 백엔드 분리에 대한 관련 정보를 소개하며 모두가 참고하고 공부할 수 있도록 공유합니다.

node vue 프로젝트 개발

최근 일주일 가까이 Vue 개발을 지켜봤는데 이전에도 React와 Angle에 노출되어 느낀 점이 많아서 특히 Vue를 배우고 싶습니다. 오랫동안 유명함. 오랫동안 공부한 결과, Vue 명령어를 Angular의 명령어와 연관시킬 수 있어 더 많은 것을 접하게 되었기 때문에 배우기가 훨씬 쉽다는 것을 알았습니다. 일부 라우터 설정과 React를 포함한 React. nodejs나 nodejs의 경로는 비슷하며, vuex는 redux와 flux를 기반으로 다시 작성되지만, vue의 템플릿 렌더링은 아직 사용법을 이해하지 못합니다. Express 렌더링 ejs와는 다릅니다. vue를 사용하면 jq에서 완전히 벗어날 수 있습니다. jq를 사용하지 않는 데 따른 어떤 마법적인 이점도 느끼지 못했지만 이 문서는 vue에 대해 배운 몇 가지 새로운 지식을 기록하는 데 사용됩니다. 아이디어.

명령

• v-bind는 주로 DOM 요소 속성을 동적으로 바인딩하는 데 사용됩니다. 즉, 요소 ​​속성의 실제 값은 vm 인스턴스의 데이터 속성에 의해 제공됩니다.

• v-model은 주로 양식 요소에 대한 양방향 데이터 바인딩을 수행합니다. 양식 요소의 값이 수정되면 인스턴스 VM에 있는 해당 VM의 해당 속성도 동시에 업데이트됩니다.

• v-if, v-show, v-else 명령은 템플릿과 데이터 간의 논리적 관계를 설명합니다
  v-if와 v-else의 기능은 수치를 기준으로 DOM 요소와 포함된 하위 요소를 출력할지 여부를 결정하는 것입니다.
  예:
  77e9b00f286a023516e1ad2791758300yes94b3e26ee717c64999d7867364b1b4a3 vm 인스턴스에서 data.yes=true일 때 템플릿 엔진이 컴파일됩니다. 이 dom 노드는 e388a4556c0f65e1904146cc1a846beeyes94b3e26ee717c64999d7867364b1b4a3를 출력합니다. v-else가 v-if를 따라야 한다는 점은 주목할 가치가 있습니다. 그렇지 않으면 작동하지 않습니다. f8df8a6d3e4781c2d8245dabd46ac8c6yes94b3e26ee717c64999d7867364b1b4a3 当vm实例中的data.yes=true时，模板引擎会编 译这个dom节点，输出 e388a4556c0f65e1904146cc1a846beeyes94b3e26ee717c64999d7867364b1b4a3值得注意的是：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 14007c507bb1ec81299dbbe283918033e388a4556c0f65e1904146cc1a846bee相当于innerText,与{{msg}}相比，避免了闪现的问题。

• v-HTML 类似于innerHTML,也可以避免闪现

• v-el 这个指令相当于给dom元素添加了个索引，例如ed0649719fc4bfba38383a87f5fc83f1this is a test 94b3e26ee717c64999d7867364b1b4a3 ,如果想获取当前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的时候调用，例如b1c3790cf0d17a9a10aa5d9bfe2d7ad0{{index}}-{{$index}}bed06894275b65c1ab86501b08a632eb

3、修改数据

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

不能直接改变数组的情况

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

     2.vm.item.length=0 v-show와 v-if의 효과는 비슷합니다. 둘 다 참인지 거짓인지 판단하여 콘텐츠를 표시합니다. 유일한 차이점은 v-show가 표시되지 않을 때 display:none입니다. >, 즉 dom 노드는 유지되지만 v-if는 유지되지 않습니다.

v-for는 목록 렌더링에 사용되며 배열과 객체를 통해 반복할 수 있습니다. v-for="b in 10"는 현재 1-10

의 반복을 나타냅니다.

v -on 이벤트 바인딩, 약어 @:v-text aafab8112329b18656cd6336df93d828e388a4556c0f65e1904146cc1a846bee는 innerText와 동일하며 { {msg }}에 비해 깜박임 문제를 방지합니다.

v-HTML은 innerHTML과 유사하며 깜박임을 방지할 수도 있습니다.
v-el 이 명령은 b5f265b528544b0d212a1aebafaa4f3d 이것은 테스트입니다 94b3e26ee717c64999d7867364b1b4a3. 현재 DOM의 값을 얻으려면 vm.$els.demo.innerText 할 수 있습니다. 참고: html은 대소문자를 구분하지 않으며 카멜 케이스는 자동으로 소문자로 변환되며 -를 사용하여 대문자로 변환할 수 있습니다.

• 🎜v-ref는 v-el과 유사하며 vim.$refs를 통해 액세스됩니다. 🎜🎜🎜🎜v-pre는 이 요소 컴파일을 건너뜁니다. 🎜🎜🎜🎜v-cloak은 쓸모없다고 느껴집니다🎜🎜 🎜 🎜v-once에는 요소나 구성 요소가 한 번만 렌더링됨을 나타내는 내장 지시문이 추가되었습니다. 🎜🎜

🎜🎜🎜템플릿 렌더링🎜🎜🎜🎜1. v-for는 주로 리스트 렌더링에 사용되며, v-for에 바인딩된 내부 하위 요소를 수신된 배열에 따라 반복적으로 렌더링합니다. 별칭을 설정하면 배열의 데이터를 가져와 노드에 렌더링할 수 있습니다. 🎜🎜🎜eg:🎜🎜

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

🎜2.v-for에는 <li v-for="(index,item)과 같이 v-for를 호출할 때 호출할 수 있는 $index 변수가 내장되어 있습니다. in items"&gt ;{{index}}-{{$index}}bed06894275b65c1ab86501b08a632eb🎜🎜3. 데이터 수정🎜🎜배열을 직접 수정하여 데이터를 변경할 수 있습니다🎜🎜안되면 배열을 직접 변경하세요🎜🎜 1.vm.items[0]={} , 이 경우 수정할 수 없습니다. 해결 방법: vm.item.$set(0,{}) 또는 vm.$ set('item[0]',{})🎜🎜 2.vm.item.length=0🎜🎜4. -객체를 탐색하는 경우 (key, value)를 사용하여 키 변수를 사용자 정의할 수 있습니다. 🎜

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

🎜5. 템플릿 태그🎜🎜는 템플릿 렌더링을 위한 팔로워 노드로 사용되지만 렌더링 시 이 노드는 존재하지 않습니다.🎜🎜🎜🎜이벤트 바인딩 및 모니터링🎜🎜🎜🎜v-on은 인스턴스 속성 메서드에서 메서드를 바인딩할 수 있습니다. 이벤트 핸들러로서 v-on:은 모든 기본 이벤트 이름을 허용할 수 있습니다. 🎜🎜🎜🎜 약어 @:🎜🎜🎜🎜 메소드 함수를 바인딩할 수 있고 인라인 js도 지원하지만 하나의 문으로 제한됩니다. 🎜

绑定methods函数和内联js都可以获取原生dom元素，event.

绑定多个事件时，为顺序执行。

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!