[免费]SpringBoot+Vue景区订票(购票)体系【论文+源码+SQL脚本】 ...

大家好，我是java1234_小锋老师，看到一个不错的SpringBoot+Vue大景区订票(购票)体系，分享下哈。
项目视频演示

【免费】SpringBoot+Vue景区订票(购票)体系 Java毕业筹划_哔哩哔哩_bilibili


项目介绍

现代经济快节奏发展以及不停美满升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本景区订票体系就是在如许的大环境下诞生，其可以资助使用者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以资助管理职员进步事件处理效率，达到事半功倍的结果。此景区订票体系利用当下成熟美满的Spring Boot框架，使用跨平台的可开辟大型贸易网站的Java语言，以及最受接待的RDBMS应用软件之一的MySQL数据库进行程序开辟。景区订票体系有管理员，用户两个脚色。管理员功能有个人中心，景点范例管理，公告范例管理，景点信息管理，公告信息管理，论坛管理，用户信息管理，轮播图管理，景点留言管理，景点收藏管理，旅游景点预定管理。用户可以注册登录，查看景点信息，查看公告信息，查看论坛信息并且可以在论坛发言，可以在景点信息上留言和预定。景区订票体系的开辟根据操作职员需要筹划的界面轻巧美观，在功能模块结构上跟同范例网站保持同等，程序在实现基本要求功能时，也为数据信息面对的安全题目提供了一些实用的办理方案。可以说该程序在资助使用者高效率地处理工作事件的同时，也实现了数据信息的整体化，规范化与自动化。

体系展示

部门代码

2. package com.controller;
5. import java.util.Arrays;
6. import java.util.Map;
8. import javax.servlet.http.HttpServletRequest;
10. import com.service.UsersService;
11. import org.springframework.beans.factory.annotation.Autowired;
12. import org.springframework.web.bind.annotation.GetMapping;
13. import org.springframework.web.bind.annotation.PathVariable;
14. import org.springframework.web.bind.annotation.PostMapping;
15. import org.springframework.web.bind.annotation.RequestBody;
16. import org.springframework.web.bind.annotation.RequestMapping;
17. import org.springframework.web.bind.annotation.RequestParam;
18. import org.springframework.web.bind.annotation.RestController;
20. import com.annotation.IgnoreAuth;
21. import com.baomidou.mybatisplus.mapper.EntityWrapper;
22. import com.entity.UsersEntity;
23. import com.service.TokenService;
24. import com.utils.MPUtil;
25. import com.utils.PageUtils;
26. import com.utils.R;
28. /**
29. * 登录相关
30. */
31. @RequestMapping("users")
32. @RestController
33. public class UsersController {
34.        
35.         @Autowired
36.         private UsersService usersService;
37.        
38.         @Autowired
39.         private TokenService tokenService;
41.         /**
42.          * 登录
43.          */
44.         @IgnoreAuth
45.         @PostMapping(value = "/login")
46.         public R login(String username, String password, String captcha, HttpServletRequest request) {
47.                 UsersEntity user = usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
48.                 if(user==null || !user.getPassword().equals(password)) {
49.                         return R.error("账号或密码不正确");
50.                 }
51.                 String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
52.                 R r = R.ok();
53.                 r.put("token", token);
54.                 r.put("role",user.getRole());
55.                 r.put("userId",user.getId());
56.                 return r;
57.         }
58.        
59.         /**
60.          * 注册
61.          */
62.         @IgnoreAuth
63.         @PostMapping(value = "/register")
64.         public R register(@RequestBody UsersEntity user){
65. //            ValidatorUtils.validateEntity(user);
66.             if(usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
67.                     return R.error("用户已存在");
68.             }
69.         usersService.insert(user);
70.         return R.ok();
71.     }
73.         /**
74.          * 退出
75.          */
76.         @GetMapping(value = "logout")
77.         public R logout(HttpServletRequest request) {
78.                 request.getSession().invalidate();
79.                 return R.ok("退出成功");
80.         }
81.        
82.         /**
83.      * 密码重置
84.      */
85.     @IgnoreAuth
86.         @RequestMapping(value = "/resetPass")
87.     public R resetPass(String username, HttpServletRequest request){
88.             UsersEntity user = usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
89.             if(user==null) {
90.                     return R.error("账号不存在");
91.             }
92.             user.setPassword("123456");
93.         usersService.update(user,null);
94.         return R.ok("密码已重置为：123456");
95.     }
96.        
97.         /**
98.      * 列表
99.      */
100.     @RequestMapping("/page")
101.     public R page(@RequestParam Map<String, Object> params,UsersEntity user){
102.         EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
103.             PageUtils page = usersService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));
104.         return R.ok().put("data", page);
105.     }
107.         /**
108.      * 列表
109.      */
110.     @RequestMapping("/list")
111.     public R list( UsersEntity user){
112.                EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
113.               ew.allEq(MPUtil.allEQMapPre( user, "user"));
114.         return R.ok().put("data", usersService.selectListView(ew));
115.     }
117.     /**
118.      * 信息
119.      */
120.     @RequestMapping("/info/{id}")
121.     public R info(@PathVariable("id") String id){
122.         UsersEntity user = usersService.selectById(id);
123.         return R.ok().put("data", user);
124.     }
125.    
126.     /**
127.      * 获取用户的session用户信息
128.      */
129.     @RequestMapping("/session")
130.     public R getCurrUser(HttpServletRequest request){
131.             Integer id = (Integer)request.getSession().getAttribute("userId");
132.         UsersEntity user = usersService.selectById(id);
133.         return R.ok().put("data", user);
134.     }
136.     /**
137.      * 保存
138.      */
139.     @PostMapping("/save")
140.     public R save(@RequestBody UsersEntity user){
141. //            ValidatorUtils.validateEntity(user);
142.             if(usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
143.                     return R.error("用户已存在");
144.             }
145.             user.setPassword("123456");
146.         usersService.insert(user);
147.         return R.ok();
148.     }
150.     /**
151.      * 修改
152.      */
153.     @RequestMapping("/update")
154.     public R update(@RequestBody UsersEntity user){
155. //        ValidatorUtils.validateEntity(user);
156.         usersService.updateById(user);//全部更新
157.         return R.ok();
158.     }
160.     /**
161.      * 删除
162.      */
163.     @RequestMapping("/delete")
164.     public R delete(@RequestBody Long[] ids){
165.         usersService.deleteBatchIds(Arrays.asList(ids));
166.         return R.ok();
167.     }
168. }

复制代码

1. <template>
2.     <div>
3.         <div class="container loginIn" style="backgroundImage: url(/laonianrenjingqudingpiao/img/back-img-bg.jpg)">
5.             <div :class="2 == 1 ? 'left' : 2 == 2 ? 'left center' : 'left right'" style="backgroundColor: rgba(255, 255, 255, 1)">
6.                 <el-form class="login-form" label-position="left" :label-width="3 == 3 ? '56px' : '0px'">
7.                     <div class="title-container"><h3 class="title" style="color: rgba(149, 184, 226, 1)">景区订票系统</h3></div>
8.                     <el-form-item :label="3 == 3 ? '用户名' : ''" :class="'style'+3">
9.                         <span v-if="3 != 3" class="svg-container" style="color:rgba(136, 154, 164, 1);line-height:50px"><svg-icon icon-class="user" /></span>
10.                         <el-input placeholder="请输入用户名" name="username" type="text" v-model="rulesForm.username" />
11.                     </el-form-item>
12.                     <el-form-item :label="3 == 3 ? '密码' : ''" :class="'style'+3">
13.                         <span v-if="3 != 3" class="svg-container" style="color:rgba(136, 154, 164, 1);line-height:50px"><svg-icon icon-class="password" /></span>
14.                         <el-input placeholder="请输入密码" name="password" type="password" v-model="rulesForm.password" />
15.                     </el-form-item>
16.                     <el-form-item v-if="0 == '1'" class="code" :label="3 == 3 ? '验证码' : ''" :class="'style'+3">
17.                         <span v-if="3 != 3" class="svg-container" style="color:rgba(136, 154, 164, 1);line-height:50px"><svg-icon icon-class="code" /></span>
18.                         <el-input placeholder="请输入验证码" name="code" type="text" v-model="rulesForm.code" />
19.                         <div class="getCodeBt" @click="getRandCode(4)" style="height:50px;line-height:50px">
20.                             <span v-for="(item, index) in codes" :key="index" :style="{color:item.color,transform:item.rotate,fontSize:item.size}">{{ item.num }}</span>
21.                         </div>
22.                     </el-form-item>
23.                     <el-form-item label="角色" prop="loginInRole" class="role">
24.                         <el-radio
25.                                 v-for="item in menus"
26.                                 v-if="item.hasBackLogin=='是'"
27.                                 v-bind:key="item.roleName"
28.                                 v-model="rulesForm.role"
29.                                 :label="item.roleName"
30.                         >{{item.roleName}}</el-radio>
31.                     </el-form-item>
32.                     <el-button type="primary" @click="login()" class="loginInBt" style="padding:0;font-size:16px;border-radius:15px;height:44px;line-height:44px;width:100%;backgroundColor:rgba(149, 184, 226, 1); borderColor:rgba(149, 184, 226, 1); color:rgba(255, 255, 255, 1)">{{'2' == '1' ? '登录' : 'login'}}</el-button>
33.                     <el-form-item class="setting">
34.             <div style="color:rgba(149, 184, 226, 1)" class="register" @click="register('yonghu')">用户注册</div>
35.                     </el-form-item>
36.                
37.                 </el-form>
38.             </div>
40.         </div>
41.     </div>
42. </template>
43. <script>
44.     import menu from "@/utils/menu";
45.     export default {
46.         data() {
47.             return {
48.                 rulesForm: {
49.                     username: "",
50.                     password: "",
51.                     role: "",
52.                     code: '',
53.                 },
54.                 menus: [],
55.                 tableName: "",
56.                 codes: [{
57.                     num: 1,
58.                     color: '#000',
59.                     rotate: '10deg',
60.                     size: '16px'
61.                 },{
62.                     num: 2,
63.                     color: '#000',
64.                     rotate: '10deg',
65.                     size: '16px'
66.                 },{
67.                     num: 3,
68.                     color: '#000',
69.                     rotate: '10deg',
70.                     size: '16px'
71.                 },{
72.                     num: 4,
73.                     color: '#000',
74.                     rotate: '10deg',
75.                     size: '16px'
76.                 }],
77.             };
78.         },
79.         mounted() {
80.             let menus = menu.list();
81.             this.menus = menus;
82.         },
83.         created() {
84.             this.setInputColor()
85.             this.getRandCode()
86.         },
87.         methods: {
88.             setInputColor(){
89.                 this.$nextTick(()=>{
90.                     document.querySelectorAll('.loginIn .el-input__inner').forEach(el=>{
91.                         el.style.backgroundColor = "rgba(194, 189, 189, 0.42)"
92.                         el.style.color = "rgba(51, 51, 51, 1)"
93.                         el.style.height = "50px"
94.                         el.style.lineHeight = "50px"
95.                         el.style.borderRadius = "15px"
96.                     })
97.                     document.querySelectorAll('.loginIn .style3 .el-form-item__label').forEach(el=>{
98.                         el.style.height = "50px"
99.                         el.style.lineHeight = "50px"
100.                     })
101.                     document.querySelectorAll('.loginIn .el-form-item__label').forEach(el=>{
102.                         el.style.color = "rgb(0 0 0)"
103.                     })
104.                     setTimeout(()=>{
105.                         document.querySelectorAll('.loginIn .role .el-radio__label').forEach(el=>{
106.                             el.style.color = "rgb(0 0 0)"
107.                         })
108.                     },350)
109.                 })
111.             },
112.             register(tableName){
113.                 this.$storage.set("loginTable", tableName);
114.                 this.$router.push({path:'/register'})
115.             },
116.             // 登陆
117.             login() {
118.                 let code = ''
119.                 for(let i in this.codes) {
120.                     code += this.codes[i].num
121.                 }
122.                 if ('0' == '1' && !this.rulesForm.code) {
123.                     this.$message.error("请输入验证码");
124.                     return;
125.                 }
126.                 if ('0' == '1' && this.rulesForm.code.toLowerCase() != code.toLowerCase()) {
127.                     this.$message.error("验证码输入有误");
128.                     this.getRandCode()
129.                     return;
130.                 }
131.                 if (!this.rulesForm.username) {
132.                     this.$message.error("请输入用户名");
133.                     return;
134.                 }
135.                 if (!this.rulesForm.password) {
136.                     this.$message.error("请输入密码");
137.                     return;
138.                 }
139.                 if (!this.rulesForm.role) {
140.                     this.$message.error("请选择角色");
141.                     return;
142.                 }
143.                 let menus = this.menus;
144.                 for (let i = 0; i < menus.length; i++) {
145.                     if (menus[i].roleName == this.rulesForm.role) {
146.                         this.tableName = menus[i].tableName;
147.                     }
148.                 }
149.                 this.$http({
150.                     url: `${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,
151.                     method: "post"
152.                 }).then(({ data }) => {
153.                     if (data && data.code === 0) {
154.                         this.$storage.set("Token", data.token);
155.                         this.$storage.set("userId", data.userId);
156.                         this.$storage.set("role", this.rulesForm.role);
157.                         this.$storage.set("sessionTable", this.tableName);
158.                         this.$storage.set("adminName", this.rulesForm.username);
159.                         this.$router.replace({ path: "/index/" });
160.                     } else {
161.                         this.$message.error(data.msg);
162.                     }
163.                 });
164.             },
165.             getRandCode(len = 4){
166.                 this.randomString(len)
167.             },
168.             randomString(len = 4) {
169.                 let chars = [
170.                     "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k",
171.                     "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",
172.                     "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G",
173.                     "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
174.                     "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2",
175.                     "3", "4", "5", "6", "7", "8", "9"
176.                 ]
177.                 let colors = ["0", "1", "2","3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]
178.                 let sizes = ['14', '15', '16', '17', '18']
180.                 let output = [];
181.                 for (let i = 0; i < len; i++) {
182.                     // 随机验证码
183.                     let key = Math.floor(Math.random()*chars.length)
184.                     this.codes[i].num = chars[key]
185.                     // 随机验证码颜色
186.                     let code = '#'
187.                     for (let j = 0; j < 6; j++) {
188.                         let key = Math.floor(Math.random()*colors.length)
189.                         code += colors[key]
190.                     }
191.                     this.codes[i].color = code
192.                     // 随机验证码方向
193.                     let rotate = Math.floor(Math.random()*60)
194.                     let plus = Math.floor(Math.random()*2)
195.                     if(plus == 1) rotate = '-'+rotate
196.                     this.codes[i].rotate = 'rotate('+rotate+'deg)'
197.                     // 随机验证码字体大小
198.                     let size = Math.floor(Math.random()*sizes.length)
199.                     this.codes[i].size = sizes[size]+'px'
200.                 }
201.             },
202.         }
203.     };
204. </script>
205. <style lang="scss" scoped>
206.     .loginIn {
207.         min-height: 100vh;
208.         position: relative;
209.         background-repeat: no-repeat;
210.         background-position: center center;
211.         background-size: cover;
213.     .left {
214.         position: absolute;
215.         left: 0;
216.         top: 0;
217.         width: 360px;
218.         height: 100%;
220.     .login-form {
221.         background-color: transparent;
222.         width: 100%;
223.         right: inherit;
224.         padding: 0 12px;
225.         box-sizing: border-box;
226.         display: flex;
227.         justify-content: center;
228.         flex-direction: column;
229.     }
231.     .title-container {
232.         text-align: center;
233.         font-size: 24px;
235.     .title {
236.         margin: 20px 0;
237.     }
238.     }
240.     .el-form-item {
241.         position: relative;
243.     .svg-container {
244.         padding: 6px 5px 6px 15px;
245.         color: #889aa4;
246.         vertical-align: middle;
247.         display: inline-block;
248.         position: absolute;
249.         left: 0;
250.         top: 0;
251.         z-index: 1;
252.         padding: 0;
253.         line-height: 40px;
254.         width: 30px;
255.         text-align: center;
256.     }
258.     .el-input {
259.         display: inline-block;
260.         height: 40px;
261.         width: 100%;
263.     & /deep/ input {
264.           background: transparent;
265.           border: 0px;
266.           -webkit-appearance: none;
267.           padding: 0 15px 0 30px;
268.           color: #fff;
269.           height: 40px;
270.       }
271.     }
273.     }
276.     }
278.     .center {
279.         position: absolute;
280.         left: 50%;
281.         top: 50%;
282.         width: 360px;
283.         transform: translate3d(-50%,-50%,0);
284.         height: 446px;
285.         border-radius: 8px;
286.     }
288.     .right {
289.         position: absolute;
290.         left: inherit;
291.         right: 0;
292.         top: 0;
293.         width: 360px;
294.         height: 100%;
295.     }
297.     .code {
298.     .el-form-item__content {
299.         position: relative;
301.     .getCodeBt {
302.         position: absolute;
303.         right: 0;
304.         top: 0;
305.         line-height: 40px;
306.         width: 100px;
307.         background-color: rgba(51,51,51,0.4);
308.         color: #fff;
309.         text-align: center;
310.         border-radius: 0 4px 4px 0;
311.         height: 40px;
312.         overflow: hidden;
314.     span {
315.         padding: 0 5px;
316.         display: inline-block;
317.         font-size: 16px;
318.         font-weight: 600;
319.     }
320.     }
322.     .el-input {
323.     & /deep/ input {
324.           padding: 0 130px 0 30px;
325.       }
326.     }
327.     }
328.     }
330.     .setting {
331.     & /deep/ .el-form-item__content {
332.           padding: 0 15px;
333.           box-sizing: border-box;
334.           line-height: 32px;
335.           height: 32px;
336.           font-size: 14px;
337.           color: #999;
338.           margin: 0 !important;
340.     .register {
341.         float: left;
342.         width: 50%;
343.     }
345.     .reset {
346.         float: right;
347.         width: 50%;
348.         text-align: right;
349.     }
350.     }
351.     }
353.     .style2 {
354.         padding-left: 30px;
356.     .svg-container {
357.         left: -30px !important;
358.     }
360.     .el-input {
361.     & /deep/ input {
362.           padding: 0 15px !important;
363.       }
364.     }
365.     }
367.     .code.style2, .code.style3 {
368.     .el-input {
369.     & /deep/ input {
370.           padding: 0 115px 0 15px;
371.       }
372.     }
373.     }
375.     .style3 {
376.     & /deep/ .el-form-item__label {
377.           padding-right: 6px;
378.       }
380.     .el-input {
381.     & /deep/ input {
382.           padding: 0 15px !important;
383.       }
384.     }
385.     }
387.     .role {
388.     & /deep/ .el-form-item__label {
389.           width: 56px !important;
390.       }
392.     & /deep/ .el-radio {
393.           margin-right: 12px;
394.       }
395.     }
397.     }
398. </style>

复制代码

源码代码

链接：https://pan.baidu.com/s/1ZF_rrnE_IT3B-v-xGXLWrg
提取码：1234

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。