| |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| -> JavaScript知识库 -> 基于Vue+Express+ElementUI+MySQL的简单数据库应用 -> 正文阅读 |
|
|
[JavaScript知识库]基于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 <!DOCTYPE html> <html> <head> ? <meta charset="UTF-8"> <!--注意要引用以下css文件，一般要通过如下所示的cdn方式引用，否则会出现组件显示效果不完整的情况--> ??<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> ? <div id="app"> ??? <el-button @click="visible=true">Button</el-button> ??? <el-dialog :visible.sync="visible" title="Hello world"> ????? <p>Try ElementUI!</p> ?? ?</el-dialog> ? </div> </body> ? <!--注意要在此引用以下两个js文件--> ??<script src="vue.js"></script> ? <script src="https://unpkg.com/element-ui/lib/index.js"></script>? ? ? <script> ??? new Vue({ ????? el: '#app', ????? data: { ??????? visible: false ????? } ??? });?? ? </script> </html> （2）fom.html <!DOCTYPE html> <html> <head> ? <meta charset="UTF-8"> ? <link rel="stylesheet" href=" https://unpkg.com/element-ui/lib/theme-chalk/index.css "> </head> <body>??? <div id="app"> ?? <!--ref属性设置Dom元素的数据获取源，:model 绑定的是form表单要提交的数据。--> ??? <el-form ref="form" :model="form" label-width="80px"> ??????? <el-form-item label="活动名称"> ??????????? <el-input v-model="form.name"></el-input> ??????? </el-form-item> ??????? <el-form-item label="活动区域"> ??????????? <el-select v-model="form.region" placeholder="请选择活动区域"> ??????????? ????? <el-option label="上海" value="上海"></el-option> ??????????? ????? <el-option label="北京" value="北京"></el-option> ??????????? </el-select> ??????? </el-form-item> ??????? <el-form-item label="活动时间"> ??????????? <el-col :span="11"> ??????????? ????? <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker> ??????????? </el-col>??????????? ??????? </el-form-item> ??????? <el-form-item label="即时配送"> ??????????? <el-switch v-model="form.delivery"></el-switch> ??????? </el-form-item> ??????? <el-form-item label="活动性质"> ??????????? <el-checkbox-group v-model="form.type"> ??????????? ????? <el-checkbox label="美食/餐厅线上活动"></el-checkbox> ??????????? ????? <el-checkbox label="地推活动"></el-checkbox> ??????????? ????? <el-checkbox label="线下主题活动"></el-checkbox> ??????????? ????? <el-checkbox label="单纯品牌曝光"></el-checkbox> ??????????? </el-checkbox-group> ??????? </el-form-item> ??????? <el-form-item label="特殊资源"> ??????????? <el-radio-group v-model="form.resource"> ??????????? ????? <el-radio label="线上品牌商赞助"></el-radio> ??????????? ????? <el-radio label="线下场地免费"></el-radio> ??????????? </el-radio-group> ??????? </el-form-item> ??????? <el-form-item label="活动形式"> ??????????? <el-input type="textarea" v-model="form.desc"></el-input> ??????? </el-form-item> ??????? <el-form-item> ??????????? <el-button type="primary" @click="onSubmit">立即创建</el-button> ??????????? <el-button @click="onCancel">取消</el-button> ??????? </el-form-item> ??? </el-form> </div> ??? <script src="vue.js"></script> ? ??<script src="https://unpkg.com/element-ui/lib/index.js"></script> ??? <script> ??????? var vm=new Vue({ ??????????? el:"#app", ??????????? data:{ ?????????? ?????form: { ??????????????????? name: '', ??????????????????? region: '', ??????????????????? date: '', ??????????????????? delivery: false, ??????????????????? type: [], ??????????????????? resource: '', ??????????????????? desc: '' ??????????????? } ??????????? }, ??????????? methods: { ??????????????? onSubmit() {??????????????????? ??????????????????? let date = this.form.date; ??????????????????? let year = date.getFullYear(); // 年 ??????????????????? let month = date.getMonth() + 1; // 月 ??????? ????????????let day = date.getDate(); // 日 //利用使用${expression}嵌入语法动态生成“提示信息字符串”。 ??????????????????? let result=`${this.form.name},${this.form.region}地区,活动日期：${year}年${month}月${day}日,${this.form.delivery==true?"即时配送":"不即时配送"},${this.form.type},${this.form.resource},活动形式：${this.form.desc}` ??????????????????? console.log(result); ??????????????????? //Notification通知组件给出“提交信息”。 ??????????????????? this.$notify({title: '提交信息',message: result,duration: 2000}); ??????????????????? }, ??????????????? onCancel(){ ??????????????????? this.form.name=''; ??????????????????? this.form.region=''; ??????????????????? this.form.date=new Date(); ??????????????????? this.form.delivery=false; ??????????????????? this.form.type=[]; ??????????????? ????this.form.resource=''; ??????????????????? this.form.desc='';?????????????????? ??????????????? } ??????????? }, ??????????? created(){ ??????????????? this.form.date=new Date(); ??????????? } ??????? }); ????? </script> </html> （3）dialog.html <!DOCTYPE html> <html> <head> ? <meta charset="UTF-8"> ? <!-- import CSS --> ? <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> ? <style> ??? .el-dialog{ ?????? display: flex; ?????? flex-direction: column; ?????? margin:0 !important; ?????? position:absolute; ?????? top:50%; ?????? left:50%; ?????? transform:translate(-50%,-50%); ?????? /*height:600px;*/ ?????? max-height:calc(100% - 30px); ?????? max-width:calc(100% - 30px); ?? } ?? .el-dialog .el-dialog__body{ ?????? flex:1; ?????? overflow: auto; ?? } ? </style> </head> <body>??? <div id="app"> ??? <el-button type="text" @click="centerDialogVisible=true">添加活动</el-button> ??? <el-dialog title="添加活动" :visible.sync="centerDialogVisible" width="800px" center> ??????? <el-form ref="form" :model="form" label-width="80px"> ??????????? <el-form-item label="活动名称"> ??????????????? <el-input v-model="form.name"></el-input> ??????????? </el-form-item> ??????????? <el-form-item label="活动区域"> ???? ???????????<el-select v-model="form.region" placeholder="请选择活动区域"> ??????????????? <el-option label="上海" value="上海"></el-option> ??????????????? <el-option label="北京" value="北京"></el-option> ??????????????? </el-select> ??????????? </el-form-item> ??????? ????<el-form-item label="活动时间"> ??????????????? <el-col :span="11"> ??????????????? <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker> ??????????????? </el-col>??????????? ??????????? </el-form-item> ??????????? <el-form-item label="即时配送"> ??????????????? <el-switch v-model="form.delivery"></el-switch> ??????????? </el-form-item> ??????????? <el-form-item label="活动性质"> ??????????????? <el-checkbox-group v-model="form.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="特殊资源"> ??????????????? <el-radio-group v-model="form.resource"> ??????????????? <el-radio label="线上品牌商赞助"></el-radio> ??????????????? <el-radio label="线下场地免费"></el-radio> ??????????????? </el-radio-group> ??????????? </el-form-item> ??????????? <el-form-item label="活动形式"> ??????????????? <el-input type="textarea" v-model="form.desc"></el-input> ??????????? </el-form-item> ??????????? <el-form-item> ??????????????? <el-button type="primary" @click="onSubmit">立即创建</el-button> ??????????????? <el-button @click="centerDialogVisible=false">取消</el-button> ??????????? </el-form-item> ??????? </el-form> ??? </el-dialog> </div> ??? <script src="vue.js"></script> ??? <script src="https://unpkg.com/element-ui/lib/index.js"></script>??? ??? <script> ??????? var vm=new Vue({ ??????????? el:"#app", ??????????? data:{ ??????????????? form: { ??????????????????? name: '', ??????????????????? region: '', ??????????????????? date: '', ??????????????????? delivery: false, ??????????????????? type: [], ??????????????????? resource: '', ??????????????????? desc: '' ??????????????? }, ?????????????? ?centerDialogVisible: false ??????????? }, ??????????? methods: { ??????????????? onSubmit() {??????????????????? ??????????????????? let date = this.form.date; ??????????????????? let year = date.getFullYear(); // 年 ??????????????????? let month = date.getMonth() + 1; // 月??????????????????? ??????????????????? let day = date.getDate(); // 日 ??????????????????? let result=`${this.form.name},${this.form.region}地区,活动日期：${year}年${month}月${day}日,${this.form.delivery==true?"即时配送":"不即时配送"},${this.form.type},${this.form.resource},活动形式：${this. form.desc}` ??????????????????? console.log(result); ??????????????????? this.$notify({title: '提交信息',message: result,duration: 2000}); ??????????????????? }, ??????????????? onCancel(){ ??????????????????? this.form.name=''; ??????????????????? this.form.region=''; ??????????????????? this.form.date=new Date(); ??????????????????? this.form.delivery=false; ??????????????????? this.form.type=[]; ??????????????????? this.form.resource=''; ??????????????????? this.form.desc='';?????????????????? ??????????????? } ??????????? }, ??????????? created(){ ??????????????? this.form.date=new Date(); ??????????? } ??????? }); ????? </script> </html> （4）table.html <!DOCTYPE html> <html lang="en"> <head> ??? <meta charset="UTF-8"> ??? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ??? <title>Document</title>??? ? ??<!--下面通过 CDN 方式引入Element-UI css样式，否则不能正常显示icon--> ??? <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> ??? <div id="app"> ?????? <el-table? :data="tableData"? style="width: 100%"> ????????? ????????? <el-table-column??? prop="studentNum"?? label="学号"? width="150" align="center"> </el-table-column> ????????? ????????? <el-table-column??? prop="name"?? label="姓名"? width="100" ?align="center"> </el-table-column> ????????? ????????? <el-table-column??? prop="class"?? label="班级" ?width="100" ?align="center"> </el-table-column> ????????? ????????? <el-table-column??? prop="gender"?? label="性别" ?width="50" ?align="center"> </el-table-column> ????????? ????????? <el-table-column??? label="操作"? width="300" ?align="center"> ?????????????? ??<！--以下代码利用模板列实现操作按钮功能，注意利用slot-scope属性获取每行的索引和行--> ??????????? ????? ??<template ?slot-scope="scope"> ??????????????? ???<el-button size="mini" type="primary" plain @click="handleClick(scope.$index,scope.row)" icon="el-icon-message" type="text">查看</el-button> ??????????????? ???<el-button size="mini" type="info" plain @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit" >编辑</el-button> ??????????????? ???<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button> ??????????? ????? ??</template> ????????? ?????</el-table-column> ??????? </el-table> ??? </div>??? ??? <script src="vue.js"></script> ??? <script src="https://unpkg.com/element-ui/lib/index.js "></script>?? ??? <script> ??????? var vm=new Vue({ ??????? el: '#app', ??????? data: { ??????????? tableData: ??????????? [ ????????????? {"studentNum": "201811104001","name": "姜永霞","class": "软件181","gender": "女"}, ??????????????? {"studentNum": "201811104002","name": "齐宏智","class": "软件181","gender": "女"}, ??????????????? {"studentNum": "201811104003","name": "王文文","class": "软件181","gender": "女"}, ??????????????? {"studentNum": "201811104004","name": "高菲","class": "软件181","gender": "女"}, ??????????????? {"studentNum": "201811104005","name": "赵鑫","class": "软件181","gender": "女"}, ??????????????? {"studentNum": "201811104006","name": "骆加祥","class": "软件181","gender": "男"} ??????????? ] ??????? }, ??????? methods: { ??????????? handleClick(index, row) { ??????????????? console.log("查看"); ??????????????? console.log(index, row); ??????????????? let info=`查看第${index}行,学号：${row.studentNum},姓名：${row.name}` ??????????????? console.log(info); ??????????????? this.$notify({title: '信息提示',message: info,duration: 2000}); ??????????? }, ??????????? handleEdit(index, row) { ??????????????? console.log("编辑"); ??????????????? console.log(index, row); ??????????????? let info=`编辑第${index}行,学号：${row.studentNum},姓名：${row.name}` ??????????????? console.log(info); ??????????????? this.$notify({title: '信息提示',message: info,duration: 2000}); ??????????? }, ??????????? handleDelete(index, row) { ??????????????? console.log("删除"); ??????????????? console.log(index, row); ??????????????? let info=`删除第${index}行,学号：${row.studentNum},姓名：${row.name}` ??????????????? console.log(info); ??????????????? this.$notify({title: '信息提示',message: info,duration: 2000}); ??????????? } ??????? } ??? });?? ??? </script> </body> </html> |
|
|
| JavaScript知识库 最新文章 |
| ES6的相关知识点 |
| react 函数式组件 & react其他一些总结 |
| Vue基础超详细 |
| 前端JS也可以连点成线（Vue中运用 AntVG6） |
| Vue事件处理的基本使用 |
| Vue后台项目的记录 （一） |
| 前后端分离vue跨域，devServer配置proxy代理 |
| TypeScript |
| 初识vuex |
| vue项目安装包指令收集 |
|
|
| 上一篇文章 下一篇文章 查看所有文章 |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| 360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 | -2024/5/17 15:58:02- |
|
| 网站联系: qq:121756557 email:121756557@qq.com IT数码 |