NodeJS (express4.x) +vue (VUE-CLI) building a detailed tutorial on front-end separation

Good want to return to college dormitory, when the bed is small, the room with small, but the heart is full of

----to a-114, Xi ' an University of Engineering

Reprint please indicate the source: Water wheel: http://www.cnblogs.com/xuange306/p/6185453.html No pictures of the tutorial are bullying preparation work:

1. Install Nodejs---i teach you?
2. Install a dependency package express4.x point here "Nodejs build a local server
3. Install VUE-CLI scaffolding point here "" Vue-cli Build Vue Project

　　It is emphasized here that Express is a back-end server, it is a standalone server, Vue starts the front-end server, VUE-CLI has integrated a small express, the two servers are open, but they are based on Nodejs .

Nodejs section: Here I think you have set up the Express server and can access it in the browser .

2. In the Express directory, install the Cors package
   1. NPM Install Cors--save
   2. The--save here refers to the injection of cors dependency into the Package.json.
4. Configure in App.js: enable cors// as I configured
   
   
   

   // ............. var cors = require (' cors '); // ............... App.use (cors ({    origin:[' http://localhost:8080 '),    methods:[' GET ', ' POST '),    alloweheaders:[' conten-type ', ' Authorization ']});

6. Configuring a route map in Routes/index.js
   

   function (req, res, next) {  Res.json ({name:' aaa ', pwd: ' 123 ');});

Note: The back end is configured, I wrote false data here, no access to the database, I only let a JSON object returned {name: ' AAA ', pwd: ' 123 '}

As long as it's http://localhost:8080/first, this routed access can get the returned object.

What needs to be explained here is that the background of the original domain name can also be accessed to this route, that is, the domain name can be shared.

--Restart the server

Vue section: Here I think you've set up the Vue server and can access it in the browser

Description: We introduced jquery here in order to use his Ajax plugin, where some students may ask, why not vue-resource?

Vue-resource: is a vue.js plug-in that can initiate requests and process responses through XMLHttpRequest or JSONP. That is, $.ajax can do things, Vue-resource plug-ins can do the same, and Vue-resource API is more concise. In addition, Vue-resource provides a very useful inteceptor feature that uses inteceptor to attach some behavior before and after a request, such as using Inteceptor to display the loading interface on an AJAX request

I tell you why: because I do not, is so have the confidence! Also, I would like to state that if there is any unreasonable structure in this project, please enlighten me.

2. Open the portal file for the Vue project
   

3. Writing code in a portal fileThere may be someone here asking why I don't need modular development, I'm saying again, I'm not-_-now |       -_-| -_-| 
   

   Here I used the Baidu static resource library CDN load

   <script type= "Text/javascript" src= "Http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script> <button> get json</button><script>    $ (' button '). Click (function() {        $.ajax ({            type:' POST ',            URL:' Http://localhost:3000/first ',            headers:{                " Conten-type ":" Http://localhost:3000/first "            },            success:function  (backdate) {                 // body ...                 Console.log (backdate);})    }) </script>

5. Because the Vue project is automatically refreshed, if not, you manually refresh it, because I still do not understand what the circumstances will automatically refresh, and then restart the server, haha

This is now the front-end page, we click to see the console, because in the AJAX request, we have access to the success of the success, print out the data sent back

At this point, our front-end primer is over ...

We accessed the localhost:3000 port from the localhost:8080 port and interacted with each other, like the front and back end of the split March!
If this document, help you, remember to play a reward ah, 1 pieces not too little, 100 not too much

Reference:

vue.js--cross-domain additions and deletions based on $.ajax realization data

Five useful middleware for building the Express Api [translate]

Express Chinese documents

NodeJS (express4.x) +vue (VUE-CLI) building a detailed tutorial on front-end separation