使用flask+vue+element-ui创建数据管理系统（1）

创建vue项目

1. vue create vue-project
2. 配置如下
   • 不适用默认的vue2或者3，自定义配置
   • 组件选用Babel，Typescript，Router，Linter，Vuex
   • 使用vue2
   • 不使用历史模式路由
   • 使用单独文件存储配置json

引入element-ui

1. npm i element-ui -S
2. 在main.js 里面写入以下内容：
   

测试路由

添加页面，添加路由，启动界面测试（测试成功）

测试样式

注意 将App.vue的内容全部清空可能导致错误，经测试，至少保留

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

开启后端

使用flask写一个最简单的返回为字符串的函数进行测试

from flask import Flask,render_template,request,redirect

# 注意引入CORS
from flask_cors import CORS

app=Flask(__name__)

#注意添加CORS处理跨域请求
CORS(app) 


@app.route('/login',methods=['GET','POST'])
def login_sql():
    return "hello"
  
if __name__=='__main__':
    app.run()

前端获取数据

1. 为vue添加axios
   
   这是示例代码

<template>
    <div>

        <div class="form-group">
            <label for="sql_ip">sql_ip:</label>
            <input type="text" v-model="sql_ip" placeholder="input sql_ip" />
        </div>

        <div class="form-group">
            <label for="port">port:</label>
            <input type="text" v-model="port" placeholder="input port" />
        </div>

        <div class="form-group">
            <label for="name">Username:</label>
            <input type="text" v-model="name" placeholder="input name" />
        </div>

        <div class="form-group">
            <label for="password">password:</label>
            <input type="text" v-model="password" placeholder="input password" />
        </div>
        <br>


        <div>
            <button @click="initData()">Get获取数据</button>
            {{ get }}
        </div>

        <div>
            <button @click="postGetData()">Post获取数据</button>

            {{ post }}

            <br>

        </div>
    </div> 

</template>

 <script>
import axios from 'axios'
import { ref } from 'vue'

export default {

    // data是vue组件在渲染期间需要用到的数据
    data() {
        // 必须是一个函数
        return {
            sql_ip: '',
            port: '',
            name: "",
            password: '',
            get: "",
            post: ""

        }
    },

    //组件中的事件处理函数
    methods: {

        initData() {
            axios.get('http://localhost:5000/login_sql')
                //在axios请求完成之后执行的下一步操作
                .then(response => {
                    //成功后返回结果
                    this.get = response.data
                })
                //请求失败
                .catch(error => {
                    console.error(error)
                })
        },


        //提交的信息
        postGetData() {
            axios.post('http://localhost:5000/login_sql', {
                sql_ip: this.sql_ip,
                port: this.port,
                name: this.name,
                password: this.password
            })
                .then(response => {
                    this.post = response.data
                    console.log(response.data)
                })
                .catch(error => {
                    console.error(error)
                })
        },

        //执行一些依赖DOM元素的逻辑
        mounted() {
            this.initData();
        },
    }
}
</script> 

测试之后发现是可以拿到数据的

添加样式，检查前后端连接

添加样式
这是测试代码

<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-form-item label="数据库IP" prop="sql_ip">
                <el-input v-model="ruleForm.sql_ip"></el-input>
            </el-form-item>

            <el-form-item label="数据库端口" prop="port">
                <el-input v-model="ruleForm.port"></el-input>
            </el-form-item>

            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>

            <el-button @click="postGetData()">连接</el-button>

        </el-form>

    </div>

</template>


<script>
    
    import axios from 'axios';
    
    export default {
        data() {
            return {
                ruleForm: {
                    sql_ip: "",
                    port: "",
                    username: "",
                    password: ""
                },


                rules: {
                    sql_ip: [
                        { required: true, message: '请输入服务器IP地址', trigger: 'blur' },
                        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                    ],
                    port: [
                        { required: true, message: '请输入服务器端口', trigger: 'blur' },
                        { min: 1, max: 65535, message: '范围1-65535', trigger: 'blur' }
                    ],
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                    ]

                }
            };
        },

        //组件中的事件处理函数
        methods: {

            initData() {
                axios.get('http://localhost:5000/login_sql')
                    //在axios请求完成之后执行的下一步操作
                    .then(response => {
                        //成功后返回结果
                        this.get = response.data
                    })
                    //请求失败
                    .catch(error => {
                        console.error(error)
                    })
            },


            //提交的信息
            postGetData() {
                axios.post('http://localhost:5000/login_sql', {
                    sql_ip: this.$refs.ruleForm.model.sql_ip,
                    port: this.$refs.ruleForm.model.port,
                    name: this.$refs.ruleForm.model.name,
                    password: this.$refs.ruleForm.model.password,
                })
                    .then(response => {
                        
                        this.post = response.data
                        console.log(response.data)
                    })
                    .catch(error => {
                        console.error(error)
                    })
            },

            //执行一些依赖DOM元素的逻辑
            mounted() {
                this.initData();
            },
        }
    }
</script>

首页

1. 选择布局

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

2. 添加完的测试代码

<template>
    <el-container>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
              <el-header>Header</el-header>
              <el-main>Main</el-main>
            </el-container>
          </el-container>
      </el-container>
</template>


<style>
    
    .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }
    
    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }
    
    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }
    
    body > .el-container {
      margin-bottom: 40px;
    }
    
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }
    
    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
  </style>

  <script>



  </script>

将script标签引入到外层可以增加复用性
将左侧导航抽出来单独写一个文件，找到左侧导航
看到这里