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

Vue+MySQL+Express小试牛刀

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>眼睛一闭一睁,到年底了。早就想尝试用js玩儿全栈,最近正好做毕设了,是一个关于资金的管理系统,于是乎,正好用来练练手。一咬牙一跺脚----嗯,就用<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>+MySQL+Express吧。前端用<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>,后端用Express做服务端提供数据接口,数据库用MySQL(由于毕设就要求的是基于SQL数据库)。</p> <p>说时易,做时难。以前都是单写<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>,数据请求是请求的假数据,而且没有搭建过环境,所以单独用Express的话,也只是用<code>express-generator</code>生成expreess项目,而且前端是基于<code>jade</code>或<code>ejs</code>模板的。思来想去不知道如何将Vue加进去,如果要用Vue并且以组件式开发,则必然要用到<code>webpack</code>编译打包,于是...</p> <h2 id="articleHeader0">1.用<code>vue-cli</code>脚手架工具创建一个基于webpack的Vue项目</h2> <p>前提:安装<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>环境</p> <p>首先全局安装: <code>npm install -g vue-cli</code>,然后创建一个项目文件夹,进入项目目录执行:<code>vue init webpack my-project</code>(my-project是项目名)。安装完成之后可以执行 <code>npm install</code> 安装依赖,执行 <code>npm run dev</code>进行开发时调试。</p> <p>安装 <code>vue-resource</code>依赖,一种安装方式先在package.json中对应地方添加,然后执行<code>npm install</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;dependencies&quot;: { &quot;vue&quot;: &quot;^2.1.0&quot;, &quot;vue-router&quot;: &quot;^2.0.3&quot;, &quot;vue-resource&quot;: &quot;^1.0.3&quot; }," title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="json"><span class="hljs-string">"dependencies"</span>: { <span class="hljs-attr">"vue"</span>: <span class="hljs-string">"^2.1.0"</span>, <span class="hljs-attr">"vue-router"</span>: <span class="hljs-string">"^2.0.3"</span>, <span class="hljs-attr">"vue-resource"</span>: <span class="hljs-string">"^1.0.3"</span> },</code></pre> <h2 id="articleHeader1">2.添加Express服务端目录。</h2> <p>前提:电脑安装mysql数据库</p> <p>在项目根文件夹下创建一个server文件夹。然后里面创建下面三个文件:</p> <p>db.js----用来添加mysql配置</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 数据库连接配置 module.exports = { mysql: { host: 'localhost', user: 'root', password: '', database: 'test', port: '3306' } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// 数据库连接配置</span> <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 = { <span class="hljs-attr">mysql</span>: { <span class="hljs-attr">host</span>: <span class="hljs-string">'localhost'</span>, <span class="hljs-attr">user</span>: <span class="hljs-string">'root'</span>, <span class="hljs-attr">password</span>: <span class="hljs-string">''</span>, <span class="hljs-attr">database</span>: <span class="hljs-string">'test'</span>, <span class="hljs-attr">port</span>: <span class="hljs-string">'3306'</span> } }</code></pre> <p>index.js----Express服务器入口文件</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// node 后端服务器 const userApi = require('./api/userApi'); const fs = require('fs'); const path = require('path'); const bodyParser = require('body-parser'); const express = require('express'); const app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: false})); // 后端api路由 app.use('/api/user', userApi); // 监听端口 app.listen(3000); console.log('success listen at port:3000......');" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><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"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> userApi = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./api/userApi'</span>); <span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">'fs'</span>); <span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-keyword">const</span> bodyParser = <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> app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({<span class="hljs-attr">extended</span>: <span class="hljs-literal">false</span>})); <span class="hljs-comment">// 后端api路由</span> app.use(<span class="hljs-string">'/api/user'</span>, userApi); <span class="hljs-comment">// 监听端口</span> app.listen(<span class="hljs-number">3000</span>); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'success listen at port:3000......'</span>);</code></pre> <p>sql<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a>.js----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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// sql语句 var sqlMap = { // 用户 user: { add: 'insert into user(id, name, age) values (0, ?, ?)' } } module.exports = sqlMap;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// sql语句</span> <span class="hljs-keyword">var</span> sql<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a> = { <span class="hljs-comment">// 用户</span> user: { <span class="hljs-attr">add</span>: <span class="hljs-string">'insert into user(id, name, age) values (0, ?, ?)'</span> } } <span class="hljs-built_in">module</span>.exports = sqlMap;</code></pre> <p>api/userApi.js ---- 测试用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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var models = require('../db'); var express = require('express'); var router = express.Router(); var mysql = require('mysql'); var $sql = require('../sqlMap'); // 连接数据库 var conn = mysql.createConnection(models.mysql); conn.connect(); var jsonWrite = function(res, ret) { if(typeof ret === 'undefined') { res.json({ code: '1', msg: '操作失败' }); } else { res.json(ret); } }; // 增加用户接口 router.post('/addUser', (req, res) => {<br /> var sql = $sql.user.add;<br /> var params = req.body;<br /> console.log(params);<br /> conn.query(sql, [params.username, params.age], function(err, result) {<br /> if (err) {<br /> console.log(err);<br /> }<br /> if (result) {<br /> jsonWrite(res, result);<br /> }<br /> })<br /> });</p> <p>module.exports = router;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">var</span> models = <span class="hljs-built_in">require</span>(<span class="hljs-string">'../db'</span>); <span class="hljs-keyword">var</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">'express'</span>); <span class="hljs-keyword">var</span> router = express.Router(); <span class="hljs-keyword">var</span> mysql = <span class="hljs-built_in">require</span>(<span class="hljs-string">'mysql'</span>); <span class="hljs-keyword">var</span> $sql = <span class="hljs-built_in">require</span>(<span class="hljs-string">'../sqlMap'</span>); <span class="hljs-comment">// 连接数据库</span> <span class="hljs-keyword">var</span> conn = mysql.createConnection(models.mysql); conn.connect(); <span class="hljs-keyword">var</span> jsonWrite = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res, ret</span>) </span>{ <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> ret === <span class="hljs-string">'undefined'</span>) { res.json({ <span class="hljs-attr">code</span>: <span class="hljs-string">'1'</span>, <span class="hljs-attr">msg</span>: <span class="hljs-string">'操作失败'</span> }); } <span class="hljs-keyword">else</span> { res.json(ret); } }; <span class="hljs-comment">// 增加用户接口</span> router.post(<span class="hljs-string">'/addUser'</span>, (req, res) =&gt; { <span class="hljs-keyword">var</span> sql = $sql.user.add; <span class="hljs-keyword">var</span> params = req.body; <span class="hljs-built_in">console</span>.log(params); conn.query(sql, [params.username, params.age], <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">err, result</span>) </span>{ <span class="hljs-keyword">if</span> (err) { <span class="hljs-built_in">console</span>.log(err); } <span class="hljs-keyword">if</span> (result) { jsonWrite(res, result); } }) }); <span class="hljs-built_in">module</span>.exports = router;</code></pre> <p>编写完成之后,就可以在项目根目录下安装依赖<code>npm install express mysql body-parser</code>;</p> <p>此时在server文件夹下执行<code>node index</code>(这里也可以加载package.json中,然后使用npm执行)看到success listen at port:3000......即服务端启动成功。</p> <h2 id="articleHeader2">3.编写vue测试文件</h2> <p>由于这里只是为了测试,所以直接在vue-cli生成的Hello.vue中编写即可。</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div class=&quot;hello&quot;> <h1>{{ msg }}</h1> <form> <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 /> <a href=&quot;javascript:;&quot; @click=&quot;addUser&quot;>提交</a><br /> </form> </p></div> <p></template></p> <p><script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App', userName: '', age: '' } }, methods: { addUser() { var name = this.userName; var age = this.age; this.$http.post('/api/user/addUser', { username: name, age: age },{}).then((response) => { console.log(response); }) } } } </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">h1</span>&gt;</span>{{ msg }}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</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">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</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</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"javascript:;"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"addUser"</span>&gt;</span>提交<span class="hljs-tag">&lt;/<span class="hljs-name">a</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">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'hello'</span>, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">msg</span>: <span class="hljs-string">'Welcome to Your Vue.js App'</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">methods</span>: { addUser() { <span class="hljs-keyword">var</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">var</span> age = <span class="hljs-keyword">this</span>.age; <span class="hljs-keyword">this</span>.$http.post(<span class="hljs-string">'/api/user/addUser'</span>, { <span class="hljs-attr">username</span>: name, <span class="hljs-attr">age</span>: age },{}).then(<span class="hljs-function">(<span class="hljs-params">response</span>) =&gt;</span> { <span class="hljs-built_in">console</span>.log(response); }) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h2 id="articleHeader3">4.设置代理与跨域</h2> <p>完成上面3步之后,执行<code>npm run dev</code>,然后输入一组数据,点击保存,你会发现会报一个错误:vue-resource.common.js?e289:1071 POST <a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8080/api/user/addUser 404 (Not Found).<br />这是由于直接访问8080端口,是访问不到的,所以这里需要设置一下代理转发映射.</p> <p>vue-cli的config文件中有一个<code>proxyTable</code>参数,用来设置地址映射表,可以添加到开发时配置(dev)中</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="dev: { // ... proxyTable: { '/api': { target: 'http://127.0.0.1:3000/api/', changeOrigin: true, pathRewrite: { '^/api': '' } } }, // ... }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">dev: { <span class="hljs-comment">// ...</span> proxyTable: { <span class="hljs-string">'/api'</span>: { <span class="hljs-attr">target</span>: <span class="hljs-string">'http://127.0.0.1:3000/api/'</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">''</span> } } }, <span class="hljs-comment">// ...</span> }</code></pre> <p>即请求<code>/api</code>时就代表<code>http://127.0.0.1:3000/api/</code>(这里要写ip,不要写localhost),<br /><code>changeOrigin</code>参数接收一个布尔值,如果为<code>true</code>,这样就不会有跨域问题了。</p> <p>好了,到这里,基本上完成了,可以去添加一个数据试试了。</p> <p>最终项目目录结构</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="|-- build |-- config |-- node_modules |-- server |-- api |-- userApi.js |-- db.js |-- index.js |-- sqlMap.js |-- src |-- assets |-- components |-- Hello.vue |-- App.vue |-- static |-- .babelrc |-- .editorconfig |-- .gitignore |-- index.html |-- package.json |-- README.md" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>|<span class="hljs-comment">-- build</span> |<span class="hljs-comment">-- config</span> |<span class="hljs-comment">-- node_modules</span> |<span class="hljs-comment">-- server</span> |<span class="hljs-comment">-- api</span> |<span class="hljs-comment">-- userApi.js</span> |<span class="hljs-comment">-- db.js</span> |<span class="hljs-comment">-- index.js</span> |<span class="hljs-comment">-- sqlMap.js</span> |<span class="hljs-comment">-- src</span> |<span class="hljs-comment">-- assets</span> |<span class="hljs-comment">-- components</span> |<span class="hljs-comment">-- Hello.vue</span> |<span class="hljs-comment">-- App.vue</span> |<span class="hljs-comment">-- static</span> |<span class="hljs-comment">-- .<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>rc</span> |<span class="hljs-comment">-- .editorconfig</span> |<span class="hljs-comment">-- .gitignore</span> |<span class="hljs-comment">-- index.html</span> |<span class="hljs-comment">-- package.json</span> |<span class="hljs-comment">-- README.md</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bVItas?w=1181&amp;h=586" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>终于调通了,这里的项目目录还可以根据项目的实际情况进行模块划分等等。如有问题或其他建议,欢迎交流~<br />博客原文:<a href="http://fehey.com/2017/01/20/vue-mysql-express/" rel="nofollow noreferrer" target="_blank">http://fehey.com/2017/01/20/v...</a></p> <p>注:建议换用 ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a></p> <p></code></p>

总结

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

Vue+MySQL+Express小试牛刀

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

Vue+MySQL+Express小试牛刀

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

80%的人都看过