boot5-1项目练习

最新推荐文章于 2024-09-12 16:43:23 发布
最新推荐文章于 2024-09-12 16:43:23 发布
阅读量197 收藏
点赞数
文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flybread/article/details/124807229
版权 
//index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>微博首页</h1>
<div>
    <div v-if="isLogin">
        <p>欢迎回来{{user.nick}}!</p>
        <a href="/insert.html">发布微博</a>
        <a href="javascript:void(0)" @click="logout()">登出</a>
    </div>
    <div v-else>
        <a href="/reg.html">注册</a>
        <a href="/login.html">登录</a>
    </div>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            isLogin:false,
            user:{nick:"刘德华"}
        },
        created:function(){
            axios.get("/currentUser").then(function (response){
                v.user = response.data;
                v.isLogin = v.user==""?false:true;
            })
        },
        methods:{
            logout(){
                //发出推出登录的请求
                axios.get("/logout").then(function (response){
                    location.reload();
                })
            }
        }
    })
</script>
</body>
</html>

insert.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>微博首页</h1>
<div>
    <div v-if="isLogin">
        <p>欢迎回来{{user.nick}}!</p>
        <a href="/insert.html">发布微博</a>
        <a href="javascript:void(0)" @click="logout()">登出</a>
    </div>
    <div v-else>
        <a href="/reg.html">注册</a>
        <a href="/login.html">登录</a>
    </div>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            isLogin:false,
            user:{nick:"刘德华"}
        },
        created:function(){
            axios.get("/currentUser").then(function (response){
                v.user = response.data;
                v.isLogin = v.user==""?false:true;
            })
        },
        methods:{
            logout(){
                //发出推出登录的请求
                axios.get("/logout").then(function (response){
                    location.reload();
                })
            }
        }
    })
</script>
</body>
</html>

login.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
</head>
<body>
<h1>发布微博页面</h1>
<div id="app">
    <input type="text" v-model="weibo.content" placeholder="请你开始装b....">
    <!--name代表上传文件时 文件的参数名-->
    <el-upload
            action="/upload"
            name="picFile"
            :limit="1"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="handleSuccess"
            :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <input type="button" value="发布微博" @click="insert()">
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                weibo:{
                    content:"",
                    url:""
                }
            }
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
                //当点击删除图片时方法会执行
                //file代表要删除的文件
                //file.response代表文件上传成功时 服务器响应的数据(文件名)
                console.log("文件名="+file.response);
                //http://localhost:8080/remove?name=xxx.jpg
                axios.get("/remove?name="+file.response).then(function (response) {
                    console.log("服务器图片已经删除")
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            insert(){
                if(v.weibo.content.trim()==""||v.weibo.url==""){
                    alert("微博内容或图片不能为空")
                    return;
                }
                axios.post("/insert",v.weibo).then(function (response){
                    if(response.data==1){
                        alert("添加完成");
                        location.href="/";
                    }else{
                        alert("请先登录");
                        location.href="/login.html";
                    }
                })
            },
            handleSuccess(response,file,fileList){
                console.log("文件上传完成,图片名字="+response);
                v.weibo.url=response;
            }
        }
    })
</script>
</html>

reg.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<div>
  <input type="text" v-model="user.username" placeholder="用户名">
  <input type="text" v-model="user.password" placeholder="密码">
  <input type="text" v-model="user.nick" placeholder="昵称">
  <input type="button" value="注册" @click="reg()">
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
  let v = new Vue({
    el:"div",
    data:{
        user:{
            username:"",password:"",nick:""
        }
    },
    methods:{
        reg(){
            axios.post("/reg",v.user).then(function (response){
                if(response.data==1){
                    alert("注册成功!");
                    location.href="/";
                }else {
                    alert("用户名已存在")
                }
            })
        }
    }
  })
</script>
</body>
</html>
 UploadController.class
package cn.tedu.boot51.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

@RestController
public class UploadController {
    @RequestMapping("/upload")
    public String upload(MultipartFile picFile) throws IOException {
        System.out.println("picFile = " + picFile);
        //得到文件原始文件名  a.jpg
        String fileName = picFile.getOriginalFilename();
        //得到后缀名  从最后一个.出现的位置截取到最后
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        //得到唯一文件名  UUID.randomUUID()得到一个唯一标识符
        fileName = UUID.randomUUID()+suffix;
        System.out.println("文件名:"+fileName);
        //准备保存图片的文件夹路径
        String dirPath = "D:/files";
        File dirFile = new File(dirPath);
        //如果该文件夹不存在 则创建此文件夹
        if (!dirFile.exists()){
            dirFile.mkdirs();//创建文件夹
        }
        //得到文件的完整路径
        String filePath = dirPath+"/"+fileName;
        //把文件保存到此路径   异常抛出
        picFile.transferTo(new File(filePath));
        System.out.println("文件保存完成! 请去此路径检查文件是否存在 "+filePath);

        return fileName;
    }

    @RequestMapping("/remove")
    public void remove(String name){
        String filePath = "D:/files/"+name;
        new File(filePath).delete();//删除文件
    }
}

UserController.class
package cn.tedu.boot51.controller;

import cn.tedu.boot51.entity.User;
import cn.tedu.boot51.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;

@RestController
public class UserController {
    @Autowired(required = false)
    UserMapper mapper;

    @RequestMapping("/reg")
    public int reg(@RequestBody User user) {
        User u = mapper.selectByUsername(user.getUsername());
        if (u != null) {//表示用户已存在
            return 2;
        }
        mapper.insert(user);
        return 1;
    }

    @RequestMapping("/login")
    public int login(@RequestBody User user, HttpSession session){
        System.out.println("user = " + user);
        User u = mapper.selectByUsername(user.getUsername());
        if(u!=null){
            if(user.getPassword().equals(u.getPassword())){
                session.setAttribute("user",u);
                return 1;
            }
            return 3;
        }
        return 2;
    }

    @RequestMapping("/currentUser")
    public User currentUser(HttpSession session){
        //HttpSession 是Object类型 用User接受需要强转
        User u = (User)session.getAttribute("user");
        return u;
    }

    @RequestMapping("/logout")
    public void logout(HttpSession session){
        session.removeAttribute("user");
    }
}

WeiboController.class
package cn.tedu.boot51.controller;

import cn.tedu.boot51.entity.User;
import cn.tedu.boot51.entity.WeiBo;
import cn.tedu.boot51.mapper.WeiboMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;
import java.util.Date;

@RestController
public class WeiboController {
    @Autowired(required = false)
    WeiboMapper mapper;

    @RequestMapping("/insert")
    public int insert(@RequestBody WeiBo weibo, HttpSession session){
        User u = (User) session.getAttribute("user");
        if(u==null){
            return 2;
        }
        weibo.setCreated(new Date());
        weibo.setUserId(u.getId());
        weibo.setNick(u.getNick());
        System.out.println("weibo = " + weibo);
        mapper.insert(weibo);
        return 1;
    }
}

WeiBo.class
package cn.tedu.boot51.entity;

import java.util.Date;

public class WeiBo {
    private Integer id;
    private String content;
    private String url;
    private String nick;
    private Date created;
    private Integer userId;

    @Override
    public String toString() {
        return "WeiBo{" +
                "id=" + id +
                ", content='" + content + '\'' +
                ", url='" + url + '\'' +
                ", nick='" + nick + '\'' +
                ", created=" + created +
                ", userId=" + userId +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getNick() {
        return nick;
    }

    public void setNick(String nick) {
        this.nick = nick;
    }

    public Date getCreated() {
        return created;
    }

    public void setCreated(Date created) {
        this.created = created;
    }

    public Integer getUserId() {
        return userId;
    }

    public void setUserId(Integer userId) {
        this.userId = userId;
    }
}
UserMapper.interface
package cn.tedu.boot51.mapper;

import cn.tedu.boot51.entity.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Result;
import org.apache.ibatis.annotations.Select;

@Mapper
public interface UserMapper {

    @Select("select * from user where username=#{username}")
    User selectByUsername(String username);

    @Insert("insert into user values(null,#{username},#{password},#{nick})")
    void insert(User user);
}

WeiboMapper.interface
package cn.tedu.boot51.mapper;

import cn.tedu.boot51.entity.User;
import cn.tedu.boot51.entity.WeiBo;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface WeiboMapper {
    @Insert("insert into weibo values(null,#{content},#{url},#{nick}," +
            "#{created},#{userId})")
    void insert(WeiBo weibo);
}

thrRandom
关注
最新版Bootstrap5教程——Bootstrap5基础
m0_61684063的博客
05-20 4677
  Bootstrap是由推特设计师Mark Otto和Jacob Thornton合作开发的一款基于HTML、CSS、JavaScript的前端开源框架，使用简洁灵活，让web开发更加快速简单。  Bootstrap现在最新的版本为v5.2.0-beta1，现在介绍一下Bootstrap5相对于以前版本的改变。
spring-boot5代码
weixin_34408717的博客
03-15 69
App.java package com.kfit.spring_boot_mybatis; import org.mybatis.spring.annotation.MapperScan; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.Spri...
Spring Boot五（配置）
我的博客
08-21 193
Spring Boot—参数配置 一.概述 为了让应用适应不同的环境，Spring Boot可以通过properties文件，YAML文件，环境变量和命令行来设置系统参数。下面我们分别对这几种方式作出详细的说明。 二.命令行参数 默认情况下，SpringApplication会将命令行参数（如–server.port=9000）的property添加到Spring Boot的E...
SpringBoot 5:Spring Boot多环境配置
qq_46300856的博客
06-23 311
文章目录一、 正文- 使用Profile文件进行多环境配置1、创建Spring Boot Web项目ProfileDemo012、创建多环境配置文件3、指定使用环境法一、在全局配置文件中指定使用环境法二、通过命令行方式指定使用环境 多环境配置的必要性，适应开发环境、测试环境、生产环境等，可采用Profile文件多环境配置和==@Profile注解多环境配置==。 一、 正文 - 使用Profile文件进行多环境配置 1、创建Spring Boot Web项目ProfileDemo01 2、创建多环
SprinBoot5详解
y_w_x_k的博客
06-12 477
spring-boot
demo-spring-boot-08-data-jdbc:spring-boot的练习项目
04-17
本篇将详细探讨"demo-spring-boot-08-data-jdbc"这个练习项目，它是基于Spring Boot进行数据库操作的一个实例，主要使用了原生的JDBC技术。我们将从项目结构、核心概念、配置解析、以及具体代码实现等角度，全面解析...
springboot-mybatis项目练习
06-14
首先，SpringBoot的核心特性在于自动配置，它通过`@SpringBootApplication`注解启动Spring Boot应用，并自动配置了一系列的Bean。这个注解包含了`@EnableAutoConfiguration`，`@ComponentScan`和`@Configuration`三...
dev-bootcamp-files:项目文件
05-07
在这个压缩包中，我们看到一个名为 "dev-bootcamp-files-master" 的主文件夹，这通常表示这是一个源代码仓库的主分支，可能包含了多个项目或练习。 在JavaScript的学习中，我们可以从以下几个关键知识点出发： 1. ...
bootcamp-dev-superior-trabalho1
03-22
【标题】"bootcamp-dev-superior-trabalho1"是一个与高级开发人员训练营相关的项目，可能是一个课程作业或实战练习。从标题来看，它可能是针对那些在编程技能上有较高要求的学习者，特别是对Java语言有深入理解的...
springboot-spring-data-jpa项目练习
08-14
在这个"springboot-spring-data-jpa项目练习"中，开发者将学习如何在Spring Boot应用中配置并使用Spring Data JPA。以下是一些关键知识点： 1. **Spring Boot配置**：首先，我们需要在`pom.xml`中添加Spring Boot和...
springboot5的框架
philxx的博客
05-05 128
首先下载springboot5 在idea中创建一个java工程 需要 导入到项目中的包 在java项目中创建一个包，在包里创建一个类，包含一个方法 然后在src下再创建一个xml文件，在这个文件里我们会实现用bean属性来实例化对象以及初始化类属性 介绍bean标签的几个属性 id属性 name属性 写测试代码 加载配置文件 context创建对象 ...
学习Bootstrap 5的第一天
m0_74293254的博客
09-01 1056
Bootstrap 简介Bootstrap 简介什么是 Bootstrap 5？Bootstrap 5 是 Bootstrap 的最新版本，它是最流行的 HTML、CSS 和 JavaScript 框架，用于创建响应式、移动优先的网站。Bootstrap5 与3 & 4的对比总体对比：具体对比：Bootstrap 3、4和5之间存在一些显著的区别。
Spring工程实现简单的登录功能
qq_42593187的博客
08-10 595
通过axios，实现前端后端互通的一部分代码
异步请求axios
KaKaa__的博客
11-14 3613
在早期的浏览器中,由于浏览器向服务器端请求数据时,服务器响应数据都是跳转到一个新的页面,而不是在原有页面上的刷新,因此对于用户来说这种操作不是很友好.同时,诸如注册用户以及用户登录等操作,我们只是让页面显示一行文字"注册成功","登录成功"修改页面的部分内容,但却要刷新整个页面,非常消耗网络资源.因此,异步请求则应运而生.
利用Axios-vue来向后端发送数据并接受响应
热门推荐
Charles
07-26 1万+
axios 是一个用于浏览器与服务端发送请求的框架，它本身具有以下特征携带数据发送请求与接收服务器的请求功能. 基本使用方式（举例）： axios.post(‘路径‘, 参数).then(function (response) { alert(response.data) }) 路径: servlet访问路径 参数: 浏览器携带数据 response.data : 浏览器...
基础管理系统实现
前端小白的成长之路
08-20 544
基本注册登录功能、查询添加功能管理系统实现
MMALL 管理项目总结
xinshoudandan的博客
06-02 262
MMALL 后台管理项目总结
JSD-2204-同步和异步请求-Ajax-Day13
TheNewSystrm的博客
07-13 790
JSD-2204-同步和异步请求-Ajax-Day13
Vue使用query传参Boolean类型，刷新之后转换为String问题
最新发布
q879936814的博客
09-12 456
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
spring cloud项目练习
07-28
你可以使用Spring Initializr来快速创建一个基本的Spring Boot项目。确保在项目创建过程中选择Spring Cloud作为依赖。 3. 探索Spring Cloud的核心组件。Spring Cloud提供了许多有用的组件，如服务注册与发现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值