建立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 label="賬號" prop="pass">
<el-input type="text" v-model="ruleForm.account" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="pass">
<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="使用者組" prop="region">
<el-select v-model="ruleForm.userGroup" placeholder="請選擇使用者組">
<el-option label="普通使用者" value="普通使用者"></el-option>
<el-option label="超級使用者" value="超級使用者"></el-option>
<el-option label="至尊使用者" value="至尊使用者"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary">提交</el-button>
</el-form-item>
</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路徑的衝突
}]
],