vue+elementui+axios+proxy+thinkcmf
用VUE做框架，配合elementUI作UI，以AXIOS实现AJAX，用代理解决服务数据问题。
- thinkcmf安装，用auto_code插件生成应用
- 在thinkcmf中制作API
- 安装VUE， 建立项目，安装element+axios，
- 引用ElementUI
- 开发模式下的开启PROXY方便进行API调试
- 更改HOME.VUE,加入EL表单，并添加验证代码
- NGIX做WEB服务：编译后在生产模式下启用反向代理重定向API
- APACHE做WEB服务：生产模式下用，开启反向代理
- 测试
thinkcmf安装，用auto_code插件生成应用
见本博客https://blog.csdn.net/kindmb/article/details/125021177
- 1、下载GITEE代码，解压，建立站点http://127.0.0.1:8004
- 2、开启伪静态，访问，建立MYSQL库，访问站点进入安装，完成
- 3、建立cmf_userlist表 加上uname,upass字段
- 4、auto_code插件生成userlist应用，注意要手写str_ends_with这个PHP7.X中不包含的函数。
在thinkcmf中制作API
1、建立/api/myapi/controller 及/api/myapi/model文件夹
2、在model下建立模型userlist（与数据库表名相同）
namespace api\myapi\model;
use think\Model;
class Userlist extends Model
{ }
3、在controller下建立UserlistController.php
namespace api\myapi\controller;
use cmf\controller\RestBaseController;
use api\myapi\model\Userlist;
class UserlistController extends RestBaseController
{
public function index()
{
$list=Userlist::select();
return json($list);
}
}
4、访问：
/api/userlist/userlist/index
5、成功后,把自动生成的代码复制到API中进行修改，实现API增删改查
public function addPost(){
$params = input('post.');
if(!$params){
$this->error('非法参数');
}
List2::create($params);
return json(array("msg" =>'ok'));
}
public function editPost(){
$params = input('post.');
if(!$params || empty($params['id'])){
$this->error('非法参数');
}
List2::update($params);
return json(array("msg" =>'ok'));
}
public function del(){
$id = input('get.id/d');
if(!(is_numeric($id) && $id>0)){
$this->error('非法参数');
}
List2::where('id',$id)->delete();
return json(array("msg" =>'ok'));
}
public function field(){
$id = input('get.id/d');
$field = input('get.field');
if(!(is_numeric($id) && $id>0 && $field)){
$this->error('非法参数');
}
$info = List2::field($field)->where('id',$id)->find();
return json(array("msg" =>'ok'));
}
安装VUE， 建立项目，安装element+axios，
npm i -g @vue/cli
vue creat vue-el //选vue2，加上路由
cd vue-el
npm i element-ui -S
npm install axios
引用ElementUI
main.js:
import Vue from 'vue'
import ElementUI from 'element-ui'; //added========================
import 'element-ui/lib/theme-chalk/index.css'; //added=================
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
Vue.use(ElementUI); //added====================
new Vue({
router,
render: h => h(App)
}).$mount('#app')
开发模式下的开启PROXY方便进行API调试
根目录下建立vue.config.js
const isProduction = process.env.NODE_ENV === 'development';
module.exports = {
publicPath: isProduction ? './' : '/',//为项目中的所有资源(js、css、img)指定一个基础路径
devServer: {
proxy: {
'/api': {//根据请求路径，匹配所有以/a开头的路径
target: 'http://127.0.0.1:8004',//此处是thinkcmf API服务器
secure: false, // 如果是https开头，要设置为true
changeOrigin: true, //为true时，发送请求头中的host会设置成target。为false，则不变。默认为true
pathRewrite: { '/api': '' },// 可选，本案例要注释掉。作用是发送请求时，请求路径重写：将 /a/xxx --> /xxx （去掉/a）
cookiePathRewrite: {//重写cookie路径，可选
'/fund': '/'
},
}
},
port: '8090'//npm run serve时的端口
},
}
更改HOME.VUE,加入EL表单，并添加验证代码
/views/home.vue中加入el表单，引入 axios，添加响应代码
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="uname">
<el-input v-model="ruleForm.uname">el-input>
el-form-item>
<el-form-item label="活动密码" prop="upass">
<el-input v-model="ruleForm.upass">el-input>
el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai">el-option>
<el-option label="区域二" value="beijing">el-option>
el-select>
el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;">el-date-picker>
el-form-item>
el-col>
<el-col class="line" :span="2">-el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;">el-time-picker>
el-form-item>
el-col>
el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery">el-switch>
el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type">el-checkbox>
<el-checkbox label="地推活动" name="type">el-checkbox>
<el-checkbox label="线下主题活动" name="type">el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type">el-checkbox>
el-checkbox-group>
el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助">el-radio>
<el-radio label="线下场地免费">el-radio>
el-radio-group>
el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc">el-input>
el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建el-button>
<el-button @click="resetForm('ruleForm')">重置el-button>
el-form-item>
<div>{{msg}}div>
el-form>
template>
<script>
import axios from 'axios'
export default {
data() {
return {
msg:'',
ruleForm: {
uname: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
uname: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
console.log(this.ruleForm)
if (valid) {
axios
.post('/api/myapi/userlist/addPost',this.ruleForm)
.then(response => (this.msg = response.data))
.catch(function (error) { // 请求失败处理
console.log(error);
});
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
script>
NGIX做WEB服务：编译后在生产模式下启用反向代理重定向API
以宝塔面板为例，建立网站(NGIX)，在网站配置中启用反向代理
如果需要替换路径，就需要进一步修改配置文件，比如，我想把
http://mydomain/api/getinfo
代理到
http://proxydomain/getinfo，也就是说要去掉api字样，就要配置一下rewrite规则:
location ~* ^/(api)
{
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:8004;
APACHE做WEB服务：生产模式下用，开启反向代理
在vhost.conf中添加下面代码的最后两行proxy设置
*:80>
DocumentRoot "XXXX"
ServerName XXXX
ServerAlias
"XXXX">
Options FollowSymLinks ExecCGI
AllowOverride All
Order allow,deny
Allow from all
Require all granted
DirectoryIndex index.php index.html error/index.html
</Directory>
ProxyPassMatch ^/api\/.*$ http://127.0.0.1:8004
ProxyPassReverse ^/api\/.*$ http://127.0.0.1:8004
.....