Actual record of separation of back-end before and after node vue project development

Preface

node vue project development

I have been watching vue development for nearly a week recently and have a lot of feelings. I have been exposed to react and angular before, so I especially want to learn vue that has long been admired by Daming. After studying for a long time, I found that I have come into contact with more things, so it is much easier to learn. I can think of the instructions of vue. The component design of vue is similar to the component design of react. The settings of some routers are similar to the routes in react or the routes in nodejs. Vuex is rewritten based on redux and flux. Although I still don’t understand how to use it, as for vue template rendering, it is not much different from express rendering of ejs. Using vue can completely get rid of jq. Although I haven't felt that there is any magical way to avoid using jq, I think this kind of two-way data binding is quite convenient. This document is used to record some new knowledge and ideas I learned about vue.

instruction

v-bind is mainly used to dynamically bind DOM element attributes, that is, the actual value of the element attribute is provided by the data attribute in the vm instance.
v-model mainly performs bidirectional data binding on form elements. When modifying the value of form elements, the corresponding attributes of the corresponding vm in the instance vm are also updated at the same time.
v-if, v-show, v-else instructions to illustrate the logical relationship between templates and data
The function of v-if and v-else is to judge whether to output the dom element and the child elements contained according to the numerical value.
eg:
<div v-if="yes">yes</div>When the vm instance=trueWhen the template engine will compile this dom node and output it<div>yes</div>It is worth noting that v-else must follow v-if immediately, otherwise it will not work.
The effects of v-show and v-if are similar. They both display content by judging the authenticity. The only difference is that when v-show is not displayed,display:none, that is, the dom node is retained, but v-if will not.
v-for is used for list rendering, and can loop through arrays and objects. Notev-for="b in 10"Currently refers to the iteration of 1-10
v-on event binding, abbreviation @:
v-text <p v-text="msg"><p>equivalent to innerText, and{{msg}}Compared to this, the flash problem is avoided.
v-HTML is similar to innerHTML, and can also avoid flashing
The v-el directive is equivalent to adding an index to the dom element, for example<div v-el="demo">this is a test </div>, If you want to get the value in the current dom, you canvm.$ ,Note: html is case-sensitive, the camel-style writing will automatically convert to lower case, and can be converted to upper case in the - method.
v-ref is similar to v-elvim.$refsaccess
v-pre skip compilation of this element
v-cloak feels useless
v-once has added built-in instructions to indicate that elements or components are rendered only once.

Template rendering

1. v-for is mainly used for list rendering, which repeatedly renders the dom elements and internal sub-elements bound to v-for according to the received array, and can obtain the data in the array and render it into the node by setting aliases.

eg:

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

2. v-for built-in $index variable, which can be called when calling v-for, for example<li v-for="(index,item) in items">{{index}}-{{$index}}</li>

3. Modify the data

Modifying the array directly can change the data

The situation where the array cannot be changed directly

1.[0]={} , In this case, it cannot be modified, solve:.$set(0,{})orvm.$set('item[0]',{})

2.=0

4. v-for traversal objects, you can use the form of (key, value) to customize key variables.

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

5. Template tag

Used as a template to render, but this node does not exist when rendered

Event binding and listening

v-on can bind the method in the instance attribute methods as the event processor, v-on: can accept all native event names later.

Abbreviation @:
The methods function can be bound, and inline js is also supported, but only one statement is limited to one statement.
Both binding methods function and inline js can obtain native dom elements and event.
When multiple events are bound, they are executed in sequence.

ui componentHungry

User Guide

Install

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

Introduce files

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/'
(ElementUI, { size: 'small' })

use

Create a new page in the components folder,HungryFind your favorite components, such as the * Copy the code to this page

In the file required for this component, for example

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

Load components in template

<template>
<div >
 <Carousel></Carousel>
 <img src="./assets/">
 <router-view/>
</div>
</template>

This will run

Front and back end separation

I am used to using node for full-stack development. Now I use vue-webpack for front-end development. It is also very exciting for node for back-end development, and the front-end and back-end separation has been achieved.

Start the backend interface

cd back
cnpm install
npm run dev

Start the front-end server

cd front
cnpm install
npm start

Enter the login page, click Login, the console prints the information of successful access, and successfully jumps to the helloworld page

Front-end communication

vue-resource

Install vue-resource and reference it in

import VueResource from 'vue-resource'
(VueResource)

Configure proxy server in config/

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

use

this.$('api/apptest')
 .then((response) =&gt; {
  // Response successfully callback  (response)
 }).catch(e =&gt; {
  // Print an error  (e)
 })
 }

Disadvantages: There is no problem in the development environment, but the request for the backend interface is not successful in the production environment.

axios

First configure axios and create a new one under src

import axios from ‘axios'
 = 5000
 = 'http://localhost:3000'
['Content-Type'] = 'application/x-www-form-urlencoded'
export default axios

Introduced in

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

use

get method

login () {
 // Get the password of the existing account ('/apptest')
 .then((response) =&gt; {
 // Response successfully callback (response)
 // this.$({name: 'main'})// No matter this.$({name: 'HelloWorld'})
 }).catch(e =&gt; {
 // Print an error (e)
 })
}

Post method

register () {
 (this)
 // Get the password of the existing account let params = {
 user: ,
 password: ,
 directionId: 
 }
 ('/signup', params)
 .then((response) =&gt; {
 // Response successfully callback (response)
 }).catch(e =&gt; {
 // Print an error (e)
 })
}

Production environment path issues

In the production environment, I found that the path after packaging is wrong, modify the config

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

 // Paths
 assetsRoot: (__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './', //It turns out to be assetsPublicPath: '/'

Source code location:/react-module/node-vue

Summarize

The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.