spring和mybatis结合做简单的增删查改系统_springbootamp;amp;vue简单的景点信息管理系统...

de42b7e71acd88b930d6f6bdd4de3598.png

springboot&&vue简单的景点信息管理系统

这两天闲着没有什么事,就根据陈哥的教程,试着写了一个springboot和vue的简单的景点信息管理系统。也就大致实现了最基本的增删查改。先看看效果图吧:

1、登陆界面:

3f9a5faa09759f12ef55b467d54630c9.png

2、注册界面:

344cc1c186bc46d802a648845a7aecd6.png

3、进入后的主界面

238927f1fd85568f7cc90a00c8925e32.png

4、景点列表:

d06ca043462808e5f31178f2e418fdcf.png

效果大致就是这样,下面具体看看该项目吧!

1、目录结构

adbb738d3c2a98d2b16464f09c7bfafd.png

2、项目的创建

这里就不再细说了,之前的文章都已经介绍的不少了,大致说说,对于这样的项目的一个搭建流程(这是对于我,可能和别人不一样)

  1. 先根据需要创建与之对应的数据库表。
  2. 根据需要添加对应的pom依赖。
  3. 添加修改主配置文件。
  4. 创建实体类
  5. 创建dao层接口(mapper接口)。
  6. 创建xxxMapper.xml映射文件,用来操作数据库。
  7. 创建业务层(service接口)以及ServiceImpl(实现类)。
  8. 创建控制器(Controller。
  9. 有工具的话,再添加一个utils工具类()。
  10. 有具体的相关配置的话,再添加一个配置类。

有关后端的搭建流程大致就是这样。

3、前端部分

此次前端部分使用的是vue,用于练手,还是简单测试一下。 这里就拿登陆界面做一个简单介绍:

<

有关html,和css的部分,大家也都有所了解,这里也就不再说了,对于vue.js部分,如果大家有js的基础的话,也不是太难,不巧的是,小编的js学的并不是太好,有点尴尬。。。

这里就跟大家说明一点:

410befd2b9bc21fc6024a2f9f88afcf8.png

这里前后端的交互是通过,axios发请求,进行与后端建立起联系。

4bb92824618679968424b8ed4b952b17.png

对于数据的获取,这里使用v-model进行绑定,拿到数据,等等,很多有关vue的知识点这里就不再介绍了,大家可以自己先行去看看。

大致就是这样,这里就不再多说了,谢谢大家!!!

天涯志

f739fb97ca1aebbc676e4bf0c70f8db3.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/532251.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spark算子_十、Spark之详解Action类算子

常用Action类算子列表reduce(func): 通过func函数来对RDD中所有元素进行聚合运算&#xff0c;先运算分区内数据&#xff0c;再运算分区间数据。scala> val rdd1 sc.makeRDD(1 to 100)rdd1: org.apache.spark.rdd.RDD[Int] ParallelCollectionRDD[4] at makeRDD at :24# 对…

await原理 js_「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能

本周&#xff0c;Nodejs v14.3.0 发布。这个版本包括添加顶级 Await、REPL 增强等功能。REPL 增强通过自动补全改进对 REPL 的预览支持&#xff0c;例如&#xff0c;下图中当输入 process.ver 之后&#xff0c;不需要输入剩下的实际内容&#xff0c;它帮我们生成了自动补全的输…

linux输入ls后不显示_零基础学习之Linux基础命令小结

安装完重启后&#xff0c;没有像sery所说在图形界面崩溃了&#xff0c;由于我没有安装X-WINDOWS而是直接进入了文本界面。如果你想做linux管理的话&#xff0c;最好在文本界面下工作&#xff0c;这样会适应如下图:第一行显示的是我们所安装的linux是Red Hat 企业4第二行显示的是…

.gitignore文件_【第1739期】为Git仓库里的.idea文件夹正名

前言.idea该不该提交到代码仓库中呢&#xff1f;你的意见呢&#xff1f;今日早读文章由《Flask Web开发》作者李辉分享。正文从这开始&#xff5e;&#xff5e;在网络上&#xff0c;我曾多次看到人们对于Git仓库中的.idea文件夹的偏见。最近的一次是在某个博客中技术专家对于志…

监控linux时间不对,shell 计算故障时间 配合web监控

#!/bin/bash#checkfail.log 为SHELL监控网站时间存放的日志文件 https://blog.51cto.com/junhai/2437965fail_time(){starttimetail -n 1000 checkfail.log |grep "$url"|grep "第1次"|tail -n 3|head -n 1|awk {print $1, $2} #取网站挂掉的时间endtimet…

linux redis清空数据恢复,Redis数据恢复--误删数据后一次吓尿的经历

1、起因&#xff0c;一个flushdb命令因为误操作&#xff0c;输入了一个flushdb命令&#xff0c;导到redis里0号库里的数据全部清空&#xff0c;OMG&#xff0c;这里有不少重要信息&#xff0c;如果被领导知道&#xff0c;必开除2、appendonly留有生机仔细想想&#xff0c;当时数…

c语言 枚举类型 uint32_浅谈C语言枚举类型 | 附自创用法分享

经济学家说过&#xff0c;路边是不会有100元的&#xff1b;但如果有&#xff0c;你还是要捡起来。同理&#xff0c;在貌似万物免费的网络时代&#xff0c;你是很难找到有针对性的好资料&#xff1b;但是如果有&#xff0c;希望你能认真学习吸收。比如笔者今天写的这一篇一今天这…

java pdf增删改查_如何利用Java代码操作索引库?

今天是刘小爱自学Java的第161天。感谢你的观看&#xff0c;谢谢你。学习计划安排如下&#xff1a;学了几天的Elasticserch&#xff0c;但都是它本身的知识点&#xff0c;如何通过Java语言去操作它呢&#xff1f;这就好比以前学数据库&#xff0c;在数据库工具中通过sql语句也能…

sublime text3 怎么配置、运行python_SublimeText3按ctrl+b执行python无反应

最后更新时间&#xff1a;2017-09-14 现象&#xff1a; 在Sublime中打开.py文件&#xff0c;按”ctrlb”执行时无反应。点击工具->编译系统中已经有且识别到Python&#xff0c;但执行”run&#xff08;ctrlshiftb&#xff09;”时无反应&#xff0c;Sublime左下角提示”No B…

internetreadfile读取数据长度为0_YOLOV3的TensorFlow2.0实现,支持在自己的数据集上训练...

GitHub链接&#xff1a;calmisential/YOLOv3_TensorFlow2​github.com我主要参考了yolov3的一个keras实现版本&#xff1a;qqwweee/keras-yolo3​github.com目前支持在PASCAL VOC 2012数据集上训练和自定义数据集上训练&#xff0c;具体的训练过程可参考项目仓库中的README文档…

深井软岩巷道群支护技术与应用_深井软岩巷道深浅孔帷幕注浆技术

一、成果内容1.基本原理对失修巷道进行刷扩、支护&#xff0c;满足使用断面后进行帮顶喷浆、底板整平&#xff0c;先底板注浆&#xff0c;然后帮、顶注浆。锚架充支护巷道直接底板整平后&#xff0c;先底板后帮、顶注浆。通过全断面深浅孔联合注水泥浆进行巷道加固&#xff0c;…

店铺咨询系统c语言,课内资源

1 题目介绍1.1 问题描述出于不同目的的旅客对交通工具和交通路径有不同的要求。例如,因公出差的旅客希望在旅途中的时间尽可能短,出门旅游的游客则期望旅费尽可能省,而老年旅客则要求中转次数最少。编制一个交通咨询系统程序,为旅客提供最优决策的交通咨询。1.2 需求分析提供对…

f分布表完整图_【教育统计答疑】如何理解正态分布、均值分布、^2分布、t分布和F分布...

许多教育统计的初学者都表示这几个分布感到学起来非常吃力&#xff0c;结合最近上课的体会以及答疑的情况&#xff0c;觉得很有必要在这里简单地对这部分内容进行澄清和梳理&#xff0c;以助理解。首先&#xff0c;“为什么要学习这几个分布”可能是许多人纠结的问题&#xff0…

新颖的c语言题目,新颖版c语言经典习题100例(全面面)

新颖版c语言经典习题100例(全面面) (66页)本资源提供全文预览&#xff0c;点击全文预览即可全文预览,如果喜欢文档就下载吧&#xff0c;查找使用更方便哦&#xff01;19.90 积分&#xfeff;实用文档C语言习题100例(最新整理版)习题目录&#xff1a;(按住Ctrl点击可以快速跳转到…

c语言jt808协议库,平台如何应答——关于JT/T808协议

前两篇也说明了一些应答的相关内容&#xff0c;对于刚接触的开发者来说恐怕还是不太容易理解&#xff0c;这里专门列举一个篇幅来讲解如何针对终端设备上报的信息进行应答。严格来讲&#xff0c;如果不应答&#xff0c;终端设备会判别为服务平台断开连接&#xff0c;就会重复发…

熊猫的python小课账号_学习python中的pandas有没有好的教程推荐?

之前好多人私信我python数据分析怎么快速入门&#xff0c;我在这里直接介绍一下自己的心得经验吧。 要学习pandas&#xff0c;我并不建议看大量的教程&#xff0c;等看完教程&#xff0c;天都黑了&#xff0c;一觉醒来热情都凉了。 我的建议是&#xff0c;首先放平心态&#xf…

ubuntu nfs linux,Ubuntu的NFS功能配置

环境:Ubuntu 10.04步骤:1.sudo apt-get install portmap2.sudo apt-get install nfs-kernel-server注意:第2步我安装失败,换源后仍然如此,最后我在新立得里面搜索到nfs-kernel-server,安装成功3.在更目录下新建共享目录:mkdir /forlinux4.gedit /etc/exprots,在后面添加/forlin…

一个android工程生成两个aar,android studio生成aar包并在其他工程引用aar包(示例代码)...

1.aar包是android studio下打包android工程中src、res、lib后生成的aar文件&#xff0c;aar包导入其他android studio 工程后&#xff0c;其他工程可以方便引用源码和资源文件2.生成aar包步骤&#xff1a;①.用android studio打开一个工程&#xff0c;然后新建一个Module&#…

android 尺寸变化动画,Android ScaleAnimation类:尺寸变化动画类

ScaleAnimation类是Android系统中的尺寸变化动画类&#xff0c;用于控制View对象的尺寸变化&#xff0c;该类继承于Animation类。 ScaleAnimation类中的很多方法都与Animation类一致&#xff0c;该类中最常用的方法便是ScaleAnimation构造方法。【基本语法】public ScaleAnimat…

javascript 本地对象和内置对象_详解 JavaScript 面向对象

1. 概述JavaScript面向对象比较难理解的点是类的继承。不管是es5写法还是es6写法&#xff0c;JavaScript继承的本质是原型链。具体可看我的上一篇文章&#xff1a;田浩&#xff1a;详解原型、原型链、构造函、实例、new​zhuanlan.zhihu.com因为es6有专门的语法&#xff0c;写法…