脚本宝典收集整理的这篇文章主要介绍了

【全栈初体验】Vue+Node+MySQL 实现前后端分离开发

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<h2 id="articleHeader0">前言</h2> <blockquote> <ul> <li>这个 <a href="https://github.com/ahh666/vue-node-mysql" rel="nofollow noreferrer" target="_blank">demo</a> 是MVVM开发模式,我也写过一个前后端结合开发的完整系统 <a href="https://github.com/ahh666/medicines_ms" rel="nofollow noreferrer" target="_blank">demo</a> </li> <li><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>项目使用vue-cil3创建的。</li> <li>使用vue-cil2创建的项目也可以实现,只是配置代理服务器的时候有一点差别。后面分别针对这两个版本进行区分。</li> <li>数据库操作使用Navicat。</li> </ul> </blockquote> <h2 id="articleHeader1">数据库配置</h2> <ol> <li>新建MySQL连接(参数可以自己配置,后面会用到) <p><span class="img-wrap"><img data-src="https://img-blog.csdnimg.cn/20190529092823121.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpSHVhbmh1YW4xMTA=,size_16,color_FF0000,t_70" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="在这里插入图片描述" title="在这里插入图片描述" style="cursor: pointer;"></span></p> </li> <li>新建数据库 <p><span class="img-wrap"><img data-src="https://img-blog.csdnimg.cn/20190529093901625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpSHVhbmh1YW4xMTA=,size_16,color_FF0000,t_70" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="在这里插入图片描述" title="在这里插入图片描述" style="cursor: pointer;"></span></p> </li> <li>新建数据表 <p><span class="img-wrap"><img data-src="https://img-blog.csdnimg.cn/20190529094457106.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpSHVhbmh1YW4xMTA=,size_16,color_FF0000,t_70" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="在这里插入图片描述" title="在这里插入图片描述" style="cursor: pointer;"></span></p> </li> </ol> <h2 id="articleHeader2">Node服务端</h2> <p>目录结构如下:</p> <p><span class="img-wrap"><img data-src="https://img-blog.csdnimg.cn/20190529163221140.png" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="在这里插入图片描述" title="在这里插入图片描述" style="cursor: pointer;"></span></p> <ol> <li>新建文件夹server</li> <li> <p>初始化</p> <ul> <li>在server文件夹下打开命令窗口</li> <li>输入命令行 <code>npm <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>it -y</code> <p><span class="img-wrap"><img data-src="https://img-blog.csdnimg.cn/20190529095600437.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpSHVhbmh1YW4xMTA=,size_16,color_FF0000,t_100" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="在这里插入图片描述" title="在这里插入图片描述" style="cursor: pointer;"></span></p> </li> </ul> </li> <li> <p>utils/DBHelper.js --&gt; 有<a href="http://www.js-code.com/tag/mysql" title="mysql" target="_blank">mysql</a>连接配置,与上面对应</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 数据库连接助手 const mysql = require('mysql'); class DBHelper{ // 获取数据库连接 getConn(){ let conn = mysql.createConnection({ // 数据库连接配置 host:'127.0.0.1', port:'3306', user:'root', password:'', database:'test' // 数据库名 }); conn.connect(); return conn; } } module.exports = DBHelper;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// 数据库连接助手</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> <a href="http://www.js-code.com/tag/mysql" title="浏览关于“mysql”的文章" target="_blank" class="tag_link">mysql</a> = <span class="hljs-built_in">require</span>(<span class="hljs-string">'mysql'</span>); <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DBHelper</span></span>{ <span class="hljs-comment">// 获取数据库连接</span> getConn(){ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> conn = mysql.createConnection({ <span class="hljs-comment">// 数据库连接配置</span> host:<span class="hljs-string">'127.0.0.1'</span>, <span class="hljs-attr">port</span>:<span class="hljs-string">'3306'</span>, <span class="hljs-attr">user</span>:<span class="hljs-string">'root'</span>, <span class="hljs-attr"><a href="http://www.js-code.com/tag/password" title="浏览关于“password”的文章" target="_blank" class="tag_link">password</a></span>:<span class="hljs-string">''</span>, <span class="hljs-attr">database</span>:<span class="hljs-string">'test'</span> <span class="hljs-comment">// 数据库名</span> }); conn.connect(); <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> conn; } } <span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = DBHelper;</code></pre> </li> <li> <p>sql<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a>.js --&gt; SQL语句,供api调用</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// sql语句 var sqlMap = { user: { // 添加用户 add: 'insert into user(name, age) values (?, ?)', // 查询用户 select: 'select * from user where name like &quot;%&quot;?&quot;%&quot;' } } module.exports = sqlMap;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// sql语句</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> sql<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a> = { <span class="hljs-attr">user</span>: { <span class="hljs-comment">// 添加用户</span> add: <span class="hljs-string">'<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>sert <a href="http://www.js-code.com/tag/int" title="浏览关于“int”的文章" target="_blank" class="tag_link">int</a>o user(<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>, age) values (?, ?)'</span>, <span class="hljs-comment">// 查询用户</span> <a href="http://www.js-code.com/tag/select" title="浏览关于“select”的文章" target="_blank" class="tag_link">select</a>: <span class="hljs-string">'select * from user where name like "%"?"%"'</span> } } <span class="hljs-built_in">module</span>.exports = sqlMap;</code></pre> </li> <li> <p>api/userApi.js --&gt; 用户api</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const express = require('express'); const router = express.Router(); const DBHelper = require('../utils/DBHelper'); const sql = require('../sqlMap'); // 增加用户 router.post('/addUser', (req, res) => { let sqlStr = sql.user.add; let params = req.body; let conn = new DBHelper().getConn(); conn.query(sqlStr, [params.name, params.age], (err, result) => { if (err) { res.json(err); } else { res.json(result); } }); conn.end(); }); // 查询用户 router.post('/selectUser', (req, res) => { let sqlStr = sql.user.select; let params = req.body; let conn = new DBHelper().getConn(); conn.query(sqlStr, [params.name], (err, result) => { if (err) { res.json(err); } else { res.json(result) } }); conn.end(); }); module.exports = router;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">'express'</span>); <span class="hljs-keyword">const</span> router = express.Router(); <span class="hljs-keyword">const</span> DBHelper = <span class="hljs-built_in">require</span>(<span class="hljs-string">'../utils/DBHelper'</span>); <span class="hljs-keyword">const</span> sql = <span class="hljs-built_in">require</span>(<span class="hljs-string">'../sqlMap'</span>); <span class="hljs-comment">// 增加用户</span> router.post(<span class="hljs-string">'/addUser'</span>, (req, res) =&gt; { <span class="hljs-keyword">let</span> sqlStr = sql.user.add; <span class="hljs-keyword">let</span> params = req.body; <span class="hljs-keyword">let</span> conn = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> DBHelper().getConn(); conn.query(sqlStr, [params.name, params.age], (err, result) =&gt; { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span> (err) { res.json(err); } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span> { res.json(result); } }); conn.end(); }); <span class="hljs-comment">// 查询用户</span> router.post(<span class="hljs-string">'/selectUser'</span>, (req, res) =&gt; { <span class="hljs-keyword">let</span> sqlStr = sql.user.select; <span class="hljs-keyword">let</span> params = req.body; <span class="hljs-keyword">let</span> conn = <span class="hljs-keyword">new</span> DBHelper().getConn(); conn.query(sqlStr, [params.name], (err, result) =&gt; { <span class="hljs-keyword">if</span> (err) { res.json(err); } <span class="hljs-keyword">else</span> { res.json(result) } }); conn.end(); }); <span class="hljs-built_in">module</span>.exports = router;</code></pre> </li> <li> <p><a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.js --&gt; 服务器入口文件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// node后端服务器 const http = require('http'); const badyParser = require('body-parser'); const express = require('express'); const userApi = require('./api/userApi'); let app = express(); let server = http.createServer(app); app.use(badyParser.json()); app.use(badyParser.urlencoded({ extended: false })); // 后端api路由 app.use('/api/user', userApi); // 启动监听 server.listen(8888, () => { console.log(' success!! port:8888') })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>后端服务器</span> <span class="hljs-keyword">const</span> http = <span class="hljs-built_in">require</span>(<span class="hljs-string">'http'</span>); <span class="hljs-keyword">const</span> badyParser = <span class="hljs-built_in">require</span>(<span class="hljs-string">'body-parser'</span>); <span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">'express'</span>); <span class="hljs-keyword">const</span> userApi = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./api/userApi'</span>); <span class="hljs-keyword">let</span> app = express(); <span class="hljs-keyword">let</span> server = http.createServer(app); app.use(badyParser.json()); app.use(badyParser.urlencoded({ <span class="hljs-attr">extended</span>: <span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span> })); <span class="hljs-comment">// 后端api路由</span> app.use(<span class="hljs-string">'/api/user'</span>, userApi); <span class="hljs-comment">// 启动监听</span> server.listen(<span class="hljs-number">8888</span>, () =&gt; { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">' success!! port:8888'</span>) })</code></pre> </li> <li>使用命令行 <code>npm inst<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a> -S <a href="http://www.js-code.com/tag/mysql" title="mysql" target="_blank">mysql</a></code> 安装mysql包,然后使用命令行 <code><a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a> index.js</code> 启动服务。 <p><span class="img-wrap"><img data-src="https://img-blog.csdnimg.cn/2019052914334433.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpSHVhbmh1YW4xMTA=,size_16,color_FF0000,t_100" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="在这里插入图片描述" title="在这里插入图片描述" style="cursor: pointer;"></span></p> </li> </ol> <h2 id="articleHeader3"><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>前端文件</h2> <ol> <li>使用命令行 <code>vue create vue-<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>-demo</code> 创建项目,vue-cil2创建项目 <a href="https://blog.csdn.net/aihuanhuan110/article/details/89331738" rel="nofollow noreferrer" target="_blank">参考这个</a> </li> <li> <p>这里不是正式项目,直接在 <code>HelloWorld.vue</code> 进行编辑:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<template> </p> <div class=&quot;hello&quot;> <form action=&quot;&quot;> 姓名:<input type=&quot;text&quot; name=&quot;username&quot; v-model=&quot;userName&quot;><br /> 年龄:<input type=&quot;text&quot; name=&quot;age&quot; v-model=&quot;age&quot;><br /> <button type=&quot;button&quot; @click=&quot;addUser&quot;>提交信息</button> </form> <form action=&quot;&quot;> <input type=&quot;text&quot; v-model=&quot;keywords&quot; placeholder=&quot;输入姓名查询&quot;> <button type=&quot;button&quot; @click=&quot;selectUser&quot;>查询</button> </form> </p></div> <p> </template> <script> import axios from 'axios' export default { name: 'HelloWorld', props: { msg: String }, data(){ return{ userName:'', age:'', keywords:'' } }, methods:{ addUser(){ // let name = this.userName; let age = this.age; axios.post('/api/user/addUser',{ name,age }).then(res=>{ alert('信息添加成功'); }).catch(err=>{ console.log(err) }) }, selectUser(){ let name = this.keywords; axios.post('api/user/selectUser',{ name }).then(res=>{ let data = res.data[0]; this.userName = data.name; this.age = data.age }).catch(err=>{ console.log(err) }) } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hello"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a></span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span>&gt;</span> 姓名:<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"username"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"userName"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> 年龄:<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"age"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"age"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a></span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"addUser"</span>&gt;</span>提交信息<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name"><a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>m</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"keywords"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"输入姓名查询"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"selectUser"</span>&gt;</span>查询<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'HelloWorld'</span>, <span class="hljs-attr">props</span>: { <span class="hljs-attr">msg</span>: <span class="hljs-built_in"><a href="http://www.js-code.com/tag/String" title="浏览关于“String”的文章" target="_blank" class="tag_link">String</a></span> }, data(){ <span class="hljs-keyword">return</span>{ <span class="hljs-attr">userName</span>:<span class="hljs-string">''</span>, <span class="hljs-attr">age</span>:<span class="hljs-string">''</span>, <span class="hljs-attr">keywords</span>:<span class="hljs-string">''</span> } }, <span class="hljs-attr">methods</span>:{ addUser(){ <span class="hljs-comment">//</span> <span class="hljs-keyword">let</span> name = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.userName; <span class="hljs-keyword">let</span> age = <span class="hljs-keyword">this</span>.age; axios.post(<span class="hljs-string">'/api/user/addUser'</span>,{ name,age }).then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>{ <a href="http://www.js-code.com/tag/alert" title="浏览关于“alert”的文章" target="_blank" class="tag_link">alert</a>(<span class="hljs-string">'信息添加成功'</span>); }).<a href="http://www.js-code.com/tag/catch" title="浏览关于“catch”的文章" target="_blank" class="tag_link">catch</a>(<span class="hljs-function"><span class="hljs-params">err</span>=&gt;</span>{ <span class="hljs-built_in">console</span>.log(err) }) }, selectUser(){ <span class="hljs-keyword">let</span> name = <span class="hljs-keyword">this</span>.keywords; axios.post(<span class="hljs-string">'api/user/selectUser'</span>,{ name }).then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>{ <span class="hljs-keyword">let</span> data = res.data[<span class="hljs-number">0</span>]; <span class="hljs-keyword">this</span>.userName = data.name; <span class="hljs-keyword">this</span>.age = data.age }).catch(<span class="hljs-function"><span class="hljs-params">err</span>=&gt;</span>{ <span class="hljs-built_in">console</span>.log(err) }) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> </li> </ol> <h2 id="articleHeader4">设置代理处理跨域</h2> <blockquote><p>不进行设置会报404的错误。</p> <p>因为直接访问8888端口访问不到,这里需要设置代理服务器。</p> </blockquote> <h3 id="articleHeader5">vue-cli3创建的项目设置</h3> <p>在根目录新建文件 <code>vue.config.js</code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="module.exports = { devServer: { proxy: { // 设置代理 '/api': { target: 'http://127.0.0.1:8888', // 请求的目标服务器接口 changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: { // 重写请求 '^/api': '/api' // 替换target中的请求地址,也就是说在请求http://127.0.0.1:8888/XXXXX这个地址的时候直接写成/api即可。 } } } } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-built_in">module</span>.exports = { <span class="hljs-attr">devServer</span>: { <span class="hljs-attr">proxy</span>: { <span class="hljs-comment">// 设置代理</span> <span class="hljs-string">'/api'</span>: { <span class="hljs-attr">target</span>: <span class="hljs-string">'http://127.0.0.1:8888'</span>, <span class="hljs-comment">// 请求的目标服务器接口</span> changeOrigin: <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span>, <span class="hljs-comment">// 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题</span> pathRewrite: { <span class="hljs-comment">// 重写请求</span> <span class="hljs-string">'^/api'</span>: <span class="hljs-string">'/api'</span> <span class="hljs-comment">// 替换target中的请求地址,也就是说在请求http://127.0.0.1:8888/XXXXX这个地址的时候直接写成/api即可。</span> } } } } }</code></pre> <h3 id="articleHeader6">vue-cli2创建的项目设置</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 路径:config/index.js proxyTable: { '/api': { target: 'http://127.0.0.1:8888', changeOrigin: true, pathRewrite: { '^/api': '/api' } } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// 路径:config/index.js</span> proxyTable: { <span class="hljs-string">'/api'</span>: { <span class="hljs-attr">target</span>: <span class="hljs-string">'http://127.0.0.1:8888'</span>, <span class="hljs-attr">changeOrigin</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">pathRewrite</span>: { <span class="hljs-string">'^/api'</span>: <span class="hljs-string">'/api'</span> } } }</code></pre> <h2 id="articleHeader7">演示</h2> <p>来看一下效果(用来演示,没有做样式处理):</p> <ul> <li>命令行输入 <code>npm run serve</code> 运行开发环境,vue-cil2创建的项目输入 <code>npm run dev</code> </li> <li>填写信息,点击提交按钮,刷新数据库,就能看到数据已经写入到数据库。 <p><span class="img-wrap"><img data-src="https://img-blog.csdnimg.cn/20190529151058883.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpSHVhbmh1YW4xMTA=,size_22,color_FF0000,t_100" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="在这里插入图片描述" title="在这里插入图片描述" style="cursor: pointer;"></span></p> </li> <li>输入关键字,查询结果成功渲染到上面的表单中。(前提是数据库中有这个数据) <p><span class="img-wrap"><img data-src="https://img-blog.csdnimg.cn/20190529161502903.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FpSHVhbmh1YW4xMTA=,size_22,color_FF0000,t_70" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="在这里插入图片描述" title="在这里插入图片描述" style="cursor: pointer;"></span></p> </li> </ul> <h2 id="articleHeader8">最后</h2> <ul> <li>demo 已上传 <a href="https://github.com/ahh666/vue-node-mysql" rel="nofollow noreferrer" target="_blank">Github</a> </li> <li> <a href="https://blog.csdn.net/aihuanhuan110/article/details/89331738" rel="nofollow noreferrer" target="_blank">vue项目实战,猫眼移动端</a> ,从0开始搭建完整项目</li> </ul>

总结

以上是脚本宝典为你收集整理的

【全栈初体验】Vue+Node+MySQL 实现前后端分离开发

全部内容,希望文章能够帮你解决

【全栈初体验】Vue+Node+MySQL 实现前后端分离开发

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过