springboot项目搭建

最近项目刚结束,手头上没什么工作,想着项目上一直用springboot框架,但是本人对springboot一点也不了解,感觉和做ssm框架的项目无异。于是,本着学习的态度自己尝试搭建springboot框架,顺便记录搭建过程:
根据网上网友发布的博文,我先初步搭建springboot项目:
大致步骤如下:
1:创建一个mawen项目;
(1):点击右上角的file,选中new下的project:
ide
(2):在弹出页面选中maven-----如图所示选中;
在这里插入图片描述
后面就不详细介绍了。。。。。。。直至建好!
2:添加springboot相关依赖;
(1):添加父级依赖:

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.10.RELEASE</version>
  </parent>

(2):然后添加spring-web启动器依赖到dependencies节点下:

<dependencies>
     <dependency>

      <groupId>org.springframework.boot</groupId>

      <artifactId>spring-boot-starter-web</artifactId>

    </dependency>
</dependencies>

(注:添加完成后,如果不能自动下载依赖,可以手动下载:先clean再install)
在这里插入图片描述
出现这个,说明springboot依赖下载成功(也就是项目已经变成了srpngboot项目了):
在这里插入图片描述

3:创建启动类(注意,这个启动类要放在其余代码所放文件夹的外面);
在这里插入图片描述
添加@SpringBootApplication注解在类的上面
在main方法中加入SpringApplication.run(SpringBootDemo.class,args);
在这里插入图片描述
至此:springboot框架搭建完成。
框架搭建完成后,开始搭建项目:
一:创建数据库,并建表和数据:
这一步我就省略介绍了!
二:添加依赖
(1:mybatis依赖)

<dependency>
      <groupId>org.mybatis.spring.boot</groupId>
      <artifactId>mybatis-spring-boot-starter</artifactId>
      <version>1.1.1</version>
</dependency>
<dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.3</version>
 </dependency>

(2:数据库相关依赖)

<dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.44</version>
</dependency>
 <dependency>
      <groupId>org.hibernate.javax.persistence</groupId>
      <artifactId>hibernate-jpa-2.1-api</artifactId>
      <version>1.0.2.Final</version>
</dependency>
 <!-- alibaba的druid数据库连接池 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid-spring-boot-starter</artifactId>
      <version>1.1.0</version>
    </dependency>

(3:thymeleaf相关依赖:前后台访问的配置)

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
  <dependency>
      <groupId>net.sourceforge.nekohtml</groupId>
      <artifactId>nekohtml</artifactId>
      <version>1.9.22</version>
  </dependency>

三:添加yml配置文件(该文件放在resources文件夹下):
(1:数据源配置:)
在这里插入图片描述
(2:thymeleaf相关配置)
在这里插入图片描述
四:日志输出(这个很重要,项目出错控制台输出日志,便于查找问题)
在webapp下面我添加了classes文件夹,然后添加上日志输出的配置文件(logging.properties):

handlers = org.apache.juli.FileHandler, java.util.logging.ConsoleHandler  

############################################################
# Handler specific properties.
# Describes specific configuration info for Handlers.
############################################################

org.apache.juli.FileHandler.level = FINE  
org.apache.juli.FileHandler.directory = ${catalina.base}/logs  
org.apache.juli.FileHandler.prefix = error-debug.  

java.util.logging.ConsoleHandler.level = FINE  
java.util.logging.ConsoleHandler.formatter = java.util.logging.SimpleFormatter

配置结束后,附上代码:
先附上我这个项目的整理结构:
在这里插入图片描述

因为我只是简单的搭建,所以代码过于简单,实现基本功能就好:
先建实体(mybaties是实体映射数据库):
在entity包下建一个User:

package com.entity;

import javax.persistence.Entity;

import javax.persistence.Id;



@Entity

public class User {

    @Id
    private Long id;

    private String userName;

    private String password;

    private String name;

    public Long getId() {
        return id;
    }

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

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

然后是dao层,(注:这个目录结构和ssm框架如出一辙,层级的意义也是一样的,说白了就是ssm框架省略配置文件)

package com.dao;

import com.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;




public interface UserDao extends JpaRepository<User, Long> {

}

然后是service(注:分为接口和实体)
(1)接口:

package com.service;

import com.entity.User;

import java.util.List;


public interface UserService {

    List<User> findAll();
    List<User> queryUserByName(String name);

}

(2)实体:

import java.util.List;

import com.dao.UserDao;
import com.entity.User;
import com.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;


@Service

public class UserServiceImpl implements UserService {


    @Autowired
    private UserDao userDao;

    @Autowired
    private com.mapper.UserMapper UserMapper;

    @Override

    public List<User> findAll() {

        List<User> list = this.userDao.findAll();

        return list;

    }

然后是controller层:
(1)登录使用的controller

import com.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;


@Controller
@RequestMapping("/com")
public class LoginController {

    @Autowired
    private UserService userService;

    @RequestMapping("/loginer")
    public String login(@RequestParam("username") String username, @RequestParam("password") String password) {
        System.out.println("开始登录了!");
        if("admin".equals(username) && "123456".equals(password)){
            return "index";
        }
        return "login";
}

(2)获取数据的controller:

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.*;


@RestController
@RequestMapping("/user")
public class UserControlelr {

    @Autowired
    private UserService userService;


    @RequestMapping("/query")
    @ResponseBody
    public List<User> queryUserAll() {

        List<User> list = this.userService.findAll();
        return list;

    }

前端页面:
(1)登录页:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>静态页面登录测试</title>

	<script language="javascript">
 window.onload = function() {
  createCode()
 }
 var code; //在全局定义验证码 
 function createCode() {
  code = "";
  var codeLength = 4; //验证码的长度 
  var checkCode = document.getElementById("code");
  var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
   'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数 
  for(var i = 0; i < codeLength; i++) { //循环操作 
  var index = Math.floor(Math.random() * 36); //取得随机数的索引(0~35) 
   code += random[index]; //根据索引取得随机数加到code上 
  }
  checkCode.value = code; //把code值赋给验证码 
 }
 //校验验证码 
function validateLogin(){
    var sUserName = document.frmLogin.username.value ;
    var sPassword = document.frmLogin.password.value ;
    var inputCode = document.frmLogin.text_code.value;
    /*var sinputCode =document.frmLogin.inputcode.value ;  */
    if ((sUserName.length <= 0) || (sUserName=="")){
     alert("请输入用户名!");
     return false ;
    }
     
    if ((sPassword.length <= 0) || (sPassword=="")){
     alert("请输入密码!");
     return false ;
    }
    if ((inputCode.length<= 0) || (inputCode==NULL)){
        alert("请输入验证码!");
        return false ;
       }
   } 
  </script>
</head>
<body >
<fieldset>
	<table  width="933" height="412">
		<tr height="170">
			<td width="570px"> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td><table>
				<form method ="POST" action="http://127.0.0.1:8080/com/loginer" name="frmLogin"  >
					<tr>
						<td><label for="username">用户名:</label></td>
						<td><input type="text" name="username"  id="username" placeholder="input your name" size="20" maxlength="20" /></td>
						<td > </td>
						<td> </td>
					</tr>
					<tr>
						<td><label for="password">密  码:</label></td>
						<td><input type="password" name="password" id="password" placeholder="input your password" size="20" maxlength="20" )  this.value='';" /></td>
						<td> </td>
						<td> </td>
					</tr>
					<tr>
						<td><label for="text_code">验证码:</label></td>
						<td><input type="text" size="" name="text_code" id="text_code" /></td>
						<td><input type="button" id="code" onclick="createCode()" name=""></td>
					</tr>
					<tr>
						<td><input type="checkbox" name="zlogin" value="1">自动登录</td>
					</tr>
			</table>
			</td>
		<tr>
			<td> </td>
			<td><table>
				<tr>
					<td><input type="submit" name="login" value="登录" onClick="return validateLogin()"/></td>
					<td><input type="reset" name="rs" value="重置"></td>
					<td><input type="button" name="button" value="注册" onclick="window.location.href='https://www.w3school.com.cn/jsref/event_onfocus.asp'"></td>
				</tr>
				</tr>
			</table>
			</td>
	</table>
</fieldset>
</form>

</body>
</html>

分页列表:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Access-Control-Allow-Origin" content="*" charset="UTF-8"></meta>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    <title>Title</title>
    <style type="text/css">
        #content{

        }

    </style>
</head>
<body>
       <table id="content" align="center" width="500px"  >
           <tr>
               <td>姓名</td>
               <td>用户名</td>
           </tr>
       </table>
       <script type="text/javascript">
              $(function(){
                  var tem="";
                  $.post("http://127.0.0.1:8080/user/query",function(data,status){
                          var myArray=data;
                          for (var value of myArray) {
                                tem+="<tr>"+"<th>"+value.name+"</th>"+"<th>"+value.userName+"</th>"+"</tr>";
                                $("#content").append(tem);
                           }
                  });

              });
       </script>
</body>

</html>

至此,一个完整的项目结束了(增删改功能我就没做了,要放元旦了,我先偷个懒)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值