• 基于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属性获取每行的索引和行-->

                        

                   

           

       

       

       

          

       

  • 相关阅读:
    nginx几个常见的配置项
    Excel转换为Lua的配置文件
    phpcms v9对联广告关闭左侧广告
    第 46 届国际大学生程序设计竞赛（ICPC）亚洲区域赛（昆明），签到题3题
    linux进阶命令-查看任务、删除进程、全局查找文件、创建软连接、找不到库文件
    D. Yet Another Problem
    持久内存BTT实现及优化（一）
    意大利航天飞行器公司【Sidereus】完成510万欧元融资
    Spring Cloud Function现RCE 0-day漏洞
    统计力学中的概率论基础（二）
  • 原文地址：https://blog.csdn.net/weixin_41957626/article/details/127656389