• 基于Vue+Express+ElementUI+MySQL的简单数据库应用

    第9讲 基于Vue+Express+ElementUI+MySQL的简单数据库应用

    9.1Express框架

    Express是目前最流行的基于Node.js平台的快速、开放、极简的Web开发框架，提供了快速创建Web服务器的便捷方法。

    Express框架特性如下：

    （1）提供了方便简洁的路由定义方式。

    （2）对获取HTTP请求参数进行了简化。

    （3）拥有大量第三方中间件对功能进行扩展。

    （4）提供了中间件机制有效控制HTTP请求。

    （5）对模板引擎支持程度高，方便渲染动态HTML页面。

    Express可以接收并处理http post请求和http get请求。

    本讲将讲解Vue前端页面通过后端Express Web服务器完成对MySQL数据库的访问和操作的全过程。创建可以访问MySQL数据库的后端Express Web服务器，需要安装三个依赖包，分别是express、mysql和body-parser。

    9.2 ElementUI

    ElementUI（官网地址为“https://element.eleme.cn/#/zh-CN”），是“饿了么”公司（隶属于上海拉扎斯信息科技有限公司）出品的一套基于Vue 实现的一套丰富的不依赖业务的开源 UI 组件库，简化了常用组件的封装，提高了重用性原则，降低了开发的难度，可以大大提高Vue开发效率。

    ElementUI提供了6大类60多种组件，这6大类分别是：Basic、Form、Data、Notice、Nagivation、Others。要求同学根据各自项目的开发需要学习并选用这些组件。

    下面将通过4个例子熟悉ElementUI+vue的基本编程方法，

    （1）helloworld.html

     

      

     

        visible=true">Button

       

         

    Try ElementUI!

        

     

     

      

         

     

    （2）fom.html

     

     

       

      

        ref="form" :model="form" label-width="80px">

           

                v-model="form.name">

           

           

                v-model="form.region" placeholder="请选择活动区域">

                     

                     

               

           

           

               

                      type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;">

                           

           

           

                v-model="form.delivery">

           

           

                v-model="form.type">

                     

                     

                     

                     

               

           

           

                v-model="form.resource">

                     

                     

               

           

           

                v-model="form.desc">

           

           

                立即创建

                取消

           

       

       

        

       

    （3）dialog.html

     

     

     

     

       

        centerDialogVisible=true">添加活动

        :visible.sync="centerDialogVisible" width="800px" center>

            ref="form" :model="form" label-width="80px">

               

                   

               

               

                    

                   

                   

                   

               

                

                   

                   

                               

               

               

                   

               

               

                   

                   

                   

                   

                   

                   

               

               

                   

                   

                   

                   

               

               

                   

               

               

                    立即创建

                    @click="centerDialogVisible=false">取消

               

           

       

       

           

       

    （4）table.html

       

       

        Document   

        

       

       

          

                        prop="studentNum"   label="学号"  width="150" align="center">

                        prop="name"   label="姓名"  width="100"  align="center">

                        prop="class"   label="班级"  width="100"  align="center">

                        prop="gender"   label="性别"  width="50"  align="center">

                       

                     <！--以下代码利用模板列实现操作按钮功能，注意利用slot-scope属性获取每行的索引和行-->

                        

                   

           

       

       

       

          

       

  • 相关阅读:
    Golang一日一库之logrus
    HTTP、HTTPS协议详解
    [shell] 在没有sudo和root权限的机器上配置应用 && python2指南
    【Leetcode刷题Python】密码校验
    C++ list的模拟实现
    面向对象进阶第三天
    Qt多线程间信号槽传递非QObject类型对象的参数
    计算机毕业设计ssm基于SSM的社区疫情防控管理信息系统的设计与实现khjit系统+程序+源码+lw+远程部署
    【运维笔记】linux同步时间
    005利用Socket.io实现Node.js后端服务与Web前端实时交互的功能
  • 原文地址：https://blog.csdn.net/weixin_41957626/article/details/127656389