创建nuxt-test
命令：npx create-nuxt-app nuxt-test
启动项目
进入项目： cd nuxt-test
启动项目： npm run dev
浏览器预览项目
布局代码
<el-form>
:model="ruleForm"
status-icon
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item>
<el-input>
<el-form-item>
<el-input>
<el-form-item>
<el-select>
<el-option>
<el-option>
<el-option>
<el-form-item>
<el-button>提交/<el-button>
/<el-form>布局效果
创建nuxt-server服务器
创建命令： express -e nuxt-server
修改服务器端口号
//在app.js文件中暴露对象之前
app.listen(9527, () => {
console.log(`服务器已启动...`);
})
修改启动项
//在package.json中修改start命令
"scripts": {
"start": "nodemon app"
},
启动项目
启动项目： npm start
安装mysql
安装命令： npm i mysql
链接mysql
//conn.js中
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : 'root',
database : 'nuxt'
});
connection.connect();
module.exports.conn = connection
路由文件引入conn并使用
const conn = require('./db/conn')
conn.query(sql, (err, data) => {
if (err) throw err;
if (data.affectedRows > 0) {
//注册成功
res.send({
code: 0,
msg: '注册成功'
})
} else {
//注册失败
res.send({
code: 1,
msg: '注册失败'
})
})
在页面中输入数据并发送axios请求
methods: {
submitForm(){
this.$axios.post('http://127.0.0.1/users/addaccount', {
params: this.ruleForm
})
发送后出现了跨域问题
安装@nuxt/proxy模块
安装命令： npm i @nuxt/proxy --save
在nuxt.config.js配置proxy
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/proxy' //添加proxy模块
],
/*
** Axios module configuration
*/
axios: {
proxy: true // 开启proxy
},
proxy: [ //proxy配置
['/api', {
target: 'http://127.0.0.1:9527', //api请求路径
pathRewrite: { '^/api': '/' } //重定向请求路径，防止路由、api路径的冲突
}]
],
閱讀更多 源碼時代 的文章
