vue+elementui+axios+proxy+thinkcmf

大恒大

已于 2022-08-15 18:14:06 修改

阅读量642

点赞数

分类专栏： VUE 文章标签： vue.js elementui 服务器

于 2022-08-09 14:37:47 首次发布

本文链接：https://blog.youkuaiyun.com/kindmb/article/details/126245219

版权

VUE 专栏收录该内容

6 篇文章

订阅专栏

用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.youkuaiyun.com/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（与数据库表名相同）

<?php
namespace api\myapi\model;
use think\Model;
class Userlist extends Model
{  }

3、在controller下建立UserlistController.php

<?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设置

<VirtualHost *:80>
    DocumentRoot "XXXX"
    ServerName XXXX
    ServerAlias 
  <Directory "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
  .....