由于Vue版本如今升级的愈来愈快啦,因此主要改变在webpack.dev.conf.js操做:
具体改变以下css
post提交实现
一、将webpack.dev.conf.js替换为如下代码:
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
var express = require('express')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer
options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
var apiServer = express()
var bodyParser = require('body-parser')
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require('fs')
apiRouter.get('/',function(req,res){
res.json({message:"hooray!welcome to your api!"})
});
apiRouter.route('/:apiName')
.all(function(req,res){
fs.readFile('./db.json','utf8',function(err,data){
if(err) throw err
var data=JSON.parse(data)
if(data[req.params.apiName]){
res.json(data[req.params.apiName])
}
else{
res.send("NO SUCH API NAME")
}
})
})
apiServer.use('/api',apiRouter)
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
apiServer.listen(port+1,function(err){
if(err){
console.log(err)
return
}
console.log('Listening at http://localhost:' + (port + 1) + '\n')
})
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})
若是你的电脑有比较器的话发现,咱们只是在原有生成的类上面增长了几段代码:
增长的代码以下:html
var express = require('express')
var apiServer = express()
var bodyParser = require('body-parser')
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require('fs')
apiRouter.get('/',function(req,res){
res.json({message:"hooray!welcome to your api!"})
});
apiRouter.route('/:apiName')
.all(function(req,res){
fs.readFile('./db.json','utf8',function(err,data){
if(err) throw err
var data=JSON.parse(data)
if(data[req.params.apiName]){
res.json(data[req.params.apiName])
}
else{
res.send("NO SUCH API NAME")
}
})
})
apiServer.use('/api',apiRouter)
port里面:
apiServer.listen(port+1,function(err){
if(err){
console.log(err)
return
}
console.log('Listening at http://localhost:' + (port + 1) + '\n')
})
二、找到config下面的index.js
将(大约在13行)vue
proxyTable{
}
改成:webpack
proxyTable: {
'/api': 'http://localhost:8083'
},
好啦,以上就是post提交啦,那面咱们来验证一下哦git
三、 找到一个你须要用到ajaxPost提交的.vue文件
在export default里面运用post提交:
(1)在db.json里面有一段json串getListgithub
{
"getList": [
{
"id": 1,
"title": "title1"
},
{
"id": 2,
"title": "title2"
}
]
}
(2)在须要获取这段json串的地方使用ajax请求,请求方式为postweb
export default {
created: function () {
this.$http.post('api/getList') //post提交的时候也可使用get,可是get提交只能用get哦
.then((res) => {
this.nowList = res.data //将json串的数据取出来赋值给某个组件
}, (err) => {
console.log(err)
})
}
},
-----------------------------------------------------------------------------------
get提交实现
一、将webpack.dev.conf.js添加如下代码:
var jsonServer=require('json-server')
var apiServer=jsonServer.create()
var apiRouter=jsonServer.router('db.json')
var middlewares=jsonServer.defaults()
apiServer.use(middlewares)
apiServer.use('/api',apiRouter)
//这面这段代码须要添加在
//
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
//
//这段代码的下面,由于这时候才有port参数
apiServer.listen(port+1,function(){
console.log('JSON Server is running')
})
二、修改config\index.js
将(大约在13行)ajax
proxyTable{
}
改成:express
proxyTable: {
'/api': 'http://localhost:8081/#/'
},
调用
export default {
created: function() {
this.$http.get('api/getList')
.then((res)=>{
this.nowList=res.data
},(err)=>{
console.log(err)
})
},
好啦,以上就是完整的post和get提交过程,但愿能够帮到大家,博主在这里祝愿大家早日解决问题哦~json