- 使用 Spring Initializr 创建 Spring Boot 应用程序
- 在Spring Boot中配置Cassandra
- 在 Spring Boot 上配置 Tomcat 连接池
- 将Camel消息路由到嵌入WildFly的Artemis上
BlogService
package cn.itbluebox.springbootcsdn.service;
public interface BlogService {
}
BlogServiceImpl
package cn.itbluebox.springbootcsdn.service.Impl;
import cn.itbluebox.springbootcsdn.service.BlogService;
@Service
public class BlogServiceImpl implements BlogService {
}
package cn.itbluebox.springbootcsdn.web;
import cn.itbluebox.springbootcsdn.domain.Blog;
import cn.itbluebox.springbootcsdn.service.BlogService;
import cn.itbluebox.springbootcsdn.vo.PageResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("blog")
public class BlogController {
@Autowired
private BlogService blogService;
@GetMapping("queryBlogByPage")
public ResponseEntity<PageResult<Blog>> queryBlogByPage(
@RequestParam(value = "title", defaultValue = "") String title,
@RequestParam(value = "page", defaultValue = "1") Integer page,
@RequestParam(value = "rows", defaultValue = "5") Integer rows
) {
System.out.println(title + page + rows);
return ResponseEntity.ok(blogService.queryBlogByPage(title, page, rows));
}
}
BlogService
package cn.itbluebox.springbootcsdn.service;
import cn.itbluebox.springbootcsdn.domain.Blog;
import cn.itbluebox.springbootcsdn.vo.PageResult;
public interface BlogService {
PageResult<Blog> queryBlogByPage(String title, Integer page, Integer rows);
}
BlogServiceImpl
package cn.itbluebox.springbootcsdn.service.Impl;
import cn.itbluebox.springbootcsdn.domain.Blog;
import cn.itbluebox.springbootcsdn.mapper.BlogMapper;
import cn.itbluebox.springbootcsdn.service.BlogService;
import cn.itbluebox.springbootcsdn.vo.PageResult;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class BlogServiceImpl implements BlogService {
@Autowired
private BlogMapper blogMapper;
@Override
public PageResult<Blog> queryBlogByPage(String title, Integer page, Integer rows) {
PageHelper.startPage(page, rows);//自动创建好分页的条件
System.out.println("----------");
List<Blog> list = blogMapper.queryBlogByPage(title);
PageResult pageResult = new PageResult();
pageResult.setItems(list);//设置数据
//解析分页结果
PageInfo<Blog> pageInfo = new PageInfo<Blog>(list);//得到分页信息
pageResult.setTotal(pageInfo.getTotal());//设置总条数
long l = pageInfo.getTotal() / pageInfo.getPageSize();
pageResult.setTotalPage(Integer.parseInt(l+1+""));
return pageResult;
}
}
package cn.itbluebox.springbootcsdn.mapper;
import cn.itbluebox.springbootcsdn.domain.Blog;
import org.apache.ibatis.annotations.Select;
import tk.mybatis.mapper.common.Mapper;
import java.util.List;
public interface BlogMapper extends Mapper<Blog> {
@Select("select * from blog where title like '%${title}%'")
List<Blog> queryBlogByPage(String title);
}
package cn.itbluebox.springbootcsdn;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import tk.mybatis.spring.annotation.MapperScan;
@SpringBootApplication
@MapperScan("cn.itbluebox.springbootcsdn.mapper")
public class SpringBootCSDNApplication {
public static void main(String[] args) {
SpringApplication.run(SpringBootCSDNApplication.class, args);
}
}
访问:http://localhost:9090/blog/queryBlogByPage?title=&page=1&rows=5
<template>
<div>
<el-table
:data="items"
@row-click="open"
style="width: 80%;margin: auto;top:80px">
<el-table-column
prop="thumbnail"
label="缩略图"
width="180">
<!-- 图片的显示 -->
<template slot-scope="scope">
<img :src="scope.row.thumbnail" min-width="70" height="70" />
</template>
</el-table-column>
<el-table-column
prop="title"
label="标题"
width="180">
</el-table-column>
<el-table-column
prop="abstract_text"
label="摘要">
</el-table-column>
</el-table>
<div style="height: 500px;margin-top: 100px ">
<el-pagination
layout="prev, pager, next"
:total="total"
@current-change="current_change"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
info: "",
total: 0,
totalPage: 0,
items: [],
title: "",
page: 1,
rows:5,
first: 1,
last: 5,
startBlogTime: "",
endBlogTime: "",
id: "",
name: "请登录",
image: "",
email: "",
}
},
created() {//编写构造函数
this.getInfo();
},
methods: {
getInfo() {
this.$axios.get('http://localhost:9090/blog/queryBlogByPage?title=' + this.title + '&page=' + this.page + '&rows=' + this.rows)
.then(response => (
this.info = response.data,
this.total = this.info.total,
this.totalPage = this.info.totalPage,
this.items = this.info.items
)).catch(function (error) { // 请求失败处理
console.log(error);
});
},
current_change:function(currentPage){
this.page = currentPage;
this.getInfo();
}
},
watch: {
page: function () {
this.getInfo();
},
rows: function () {
this.getInfo();
},
}
}
</script>
<style scoped>
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
#top {
position: fixed;
top: 0px;
height: 50px;
width: 100%;
background-color: #f9fafc;
height: 80px;
z-index: 1;
box-shadow: 2px 2px 5px #888888;
left: 0px;
}
#top1 {
width: 70%;
margin: auto;
padding-top: 20px;
}
</style>
访问http://localhost:8080/#/
点击翻页
package cn.itbluebox.springbootcsdn.domain;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import javax.persistence.Table;
import java.util.Date;
@Data
@NoArgsConstructor
@AllArgsConstructor
@Table(name = "blog_article")
public class BlogArticle extends Blog{
private Long id;
private String context;
private Date last_update_time; //更新时间
private Character is_original;
}
@GetMapping("queryBlogArticleById")
public ResponseEntity<BlogArticle> queryBlogById(
@RequestParam(value = "id") Long id
) {
return ResponseEntity.ok(blogService.queryBlogArticleById(id));
}
BlogService
package cn.itbluebox.springbootcsdn.service;
import cn.itbluebox.springbootcsdn.domain.Blog;
import cn.itbluebox.springbootcsdn.domain.BlogArticle;
import cn.itbluebox.springbootcsdn.vo.PageResult;
public interface BlogService {
PageResult<Blog> queryBlogByPage(String title, Integer page, Integer rows);
BlogArticle queryBlogArticleById(Long id);
}
BlogServiceImpl
@Override
public BlogArticle queryBlogArticleById(Long id) {
return blogArticleMapper.queryBlogArticleById(id);
}
package cn.itbluebox.springbootcsdn.mapper;
import cn.itbluebox.springbootcsdn.domain.BlogArticle;
import org.apache.ibatis.annotations.Select;
import tk.mybatis.mapper.common.Mapper;
public interface BlogArticleMapper extends Mapper<BlogArticle> {
@Select("select * from blog_article ba LEFT JOIN blog b on ba.id = b.blog_article_id where ba.id = #{id} LIMIT 0,1")
BlogArticle queryBlogArticleById(Long id);
}
访问:http://localhost:9090/blog/queryBlogArticleById?id=1
open(row) {
this.$router.push("/Article?" + row.id);
},
<template>
<div style="width: 100%;background-color: #99a9bf ">
<div style="width: 80%;margin: auto;background-color: #f9fafc">
<el-row style="position: fixed; top: 0px;background-color: #2c3e50 ;width: 80%; z-index: 1" >
<el-col :span="24" style="background-color: white">
<div style="text-align: left;box-shadow: 5px 10px 15px 2px rgba(0,0,0,0.1);height: 50px;line-height: 50px;font-weight: bold;padding-left: 10px;background-color: #f9fafc"
>
<span v-html="title"></span>
<span style="margin-left: 50px" > 浏览量:<span v-html="info.view_count"></span></span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="24" style="margin-top: 80px;">
<div style="padding: 50px">
<p style="text-align: left" v-html="info.context"></p>
</div>
</el-col>
</el-row>
<el-row style="position: fixed; bottom : 0px;background-color: #2c3e50 ;width: 80%; z-index: 1" >
<el-col :span="24" style="background-color: white">
<div style="text-align: left;box-shadow: 5px 10px 15px 2px rgba(0,0,0,0.1);height: 50px;line-height: 30px;font-weight: bold;padding-left: 20px;background-color: #f9fafc"
>
<span style="margin-left: 50px" > 点赞数:<span v-html="info.like_count"></span></span>
<span style="float:right;margin-right: 150px">
<img height="50" @click="like" src="https://img2.baidu.com/it/u=966753824,2436291344&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
</span>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: "Article",
data() {
return {
id:"",
info: "",
total: 0,
totalPage: 0,
items: [],
title: "",
page: 1,
rows: 10,
first: 1,
last: 10,
startBlogTime: "",
endBlogTime: "",
}
},
created() {//编写构造函数
this.id = location.href.split("?")[1];
this.getInfo();
},
methods: {
getInfo() {
this.$axios.get('http://localhost:9090/blog/queryBlogArticleById?id=' + this.id )
.then(response => (
this.info = response.data,
this.title = this.info.title
)).catch(function (error) { // 请求失败处理
console.log(error);
});
},
selectBlog() {
this.page = 1;
this.rows = 10;
let startTime = (new Date(((this.value1+"").split(",")[0]))).getTime();
let endTime = (new Date(((this.value1+"").split(",")[1]))).getTime();
this.startBlogTime = startTime;
this.endBlogTime = endTime;
this.getInfo();
},
like(){
this.$axios.get('http://localhost:9090/blogging/blogLikeId?id=' + this.id );
this.getInfoView();
},
current_change:function(currentPage){
this.page = currentPage;
this.getInfo();
},
},
watch: {
page: function () {
this.getInfo();
},
rows: function () {
this.getInfo();
},
}
}
</script>
<style scoped>
</style>
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Article from '@/components/Article'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/Article',
name: 'Article',
component: Article
},
]
})
实现浏览量的增加
@GetMapping("queryBlogArticleById")
public ResponseEntity<BlogArticle> queryBlogById(
@RequestParam(value = "id") Long id
) {
//查询当前id 对应的博客信息
BlogArticle blogArticle = blogService.queryBlogArticleById(id);
Blog blog = blogService.queryBlogById(blogArticle.getId());
Long view_count = blog.getView_count();
//将访问量查询并自增后重新设置值
view_count = view_count + 1;
blog.setView_count(view_count);
//更新数据库大当中的值
blogService.updateBlog(blog);
return ResponseEntity.ok(blogArticle);
}
Blog queryBlogById(Long id);
void updateBlog(Blog blog);
@Override
public Blog queryBlogById(Long id) {
return blogMapper.queryBlogById(id);
}
@Transactional(rollbackFor = Exception.class)
public void updateBlog(Blog blog) {
blogMapper.updateByView(blog);
}
@Select("select * from blog where id = #{id} limit 0,1")
Blog queryBlogById(Long id);
@Update("UPDATE blog set view_count = #{view_count} WHERE id = #{id}")
void updateByView(Blog blog);
对应的方法
放置手残实现全部代码
<template>
<div style="width: 100%;background-color: #99a9bf ">
<div style="width: 80%;margin: auto;background-color: #f9fafc">
<el-row style="position: fixed; top: 0px;background-color: #2c3e50 ;width: 80%; z-index: 1" >
<el-col :span="24" style="background-color: white">
<div style="text-align: left;box-shadow: 5px 10px 15px 2px rgba(0,0,0,0.1);height: 50px;line-height: 50px;font-weight: bold;padding-left: 10px;background-color: #f9fafc"
>
<span v-html="title"></span>
<span style="margin-left: 50px" > 浏览量:<span v-html="info.view_count"></span></span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="24" style="margin-top: 80px;">
<div style="padding: 50px">
<p style="text-align: left" v-html="info.context"></p>
</div>
</el-col>
</el-row>
<el-row style="position: fixed; bottom : 0px;background-color: #2c3e50 ;width: 80%; z-index: 1" >
<el-col :span="24" style="background-color: white">
<div style="text-align: left;box-shadow: 5px 10px 15px 2px rgba(0,0,0,0.1);height: 50px;line-height: 30px;font-weight: bold;padding-left: 20px;background-color: #f9fafc"
>
<span style="margin-left: 50px" > 点赞数:<span v-html="info.like_count"></span></span>
<span style="float:right;margin-right: 150px">
<img height="50" @click="like" src="https://img2.baidu.com/it/u=966753824,2436291344&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
</span>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: "Article",
data() {
return {
id:"",
info: "",
total: 0,
totalPage: 0,
items: [],
title: "",
page: 1,
rows: 10,
first: 1,
last: 10,
startBlogTime: "",
endBlogTime: "",
}
},
created() {//编写构造函数
this.id = location.href.split("?")[1];
this.getInfo();
},
methods: {
getInfo() {
this.$axios.get('http://localhost:9090/blog/queryBlogArticleById?id=' + this.id )
.then(response => (
this.info = response.data,
this.title = this.info.title
)).catch(function (error) { // 请求失败处理
console.log(error);
});
},
selectBlog() {
this.page = 1;
this.rows = 10;
let startTime = (new Date(((this.value1+"").split(",")[0]))).getTime();
let endTime = (new Date(((this.value1+"").split(",")[1]))).getTime();
this.startBlogTime = startTime;
this.endBlogTime = endTime;
this.getInfo();
},
like(){
this.$axios.get('http://localhost:9090/blog/blogLikeId?id=' + this.id );
this.getInfo();
},
current_change:function(currentPage){
this.page = currentPage;
this.getInfo();
},
},
watch: {
page: function () {
this.getInfo();
},
rows: function () {
this.getInfo();
},
}
}
</script>
<style scoped>
</style>
BlogController
@GetMapping("blogLikeId")
public ResponseEntity<BlogArticle> queryBlogLikeId(
@RequestParam(value = "id") Long id
) {
//查询当前id 对应的博客信息
BlogArticle blogArticle = blogService.queryBlogArticleById(id);
Blog blog = blogService.queryBlogById(blogArticle.getId());
Long like_count = blog.getLike_count();
//将访问量查询并自增后重新设置值
like_count = like_count + 1;
blog.setLike_count(like_count);
//更新数据库大当中的值
blogService.updateBlogLikeCount(blog);
return ResponseEntity.ok(blogArticle);
}
void updateBlogLikeCount(Blog blog);
BlogServiceImpl
@Override
public void updateBlogLikeCount(Blog blog) {
blogMapper.updateByLike(blog);
}
BlogMapper
@Update("UPDATE blog set like_count = #{like_count} WHERE id = #{id}")
void updateByLike(Blog blog);
点击测试
我有三张 table 。表 A 有选项名称(即颜色、尺寸)。表 B 有选项值名称(即蓝色、红色、黑色等)。表C通过将选项名称id和选项名称值id放在一起来建立关系。 我的查询需要显示值和选项的名称,而
在mysql中,如何计算一行中的非空单元格?我只想计算某些列之间的单元格,比如第 3-10 列之间的单元格。不是所有的列...同样,仅在该行中。 最佳答案 如果你想这样做,只能在 sql 中使用名称而
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 7 年前。 Improve this ques
我正在为版本7.6进行Elasticsearch查询 我的查询是这样的: { "query": { "bool": { "should": [ {
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 7 年前。 Improve this ques
是否可以编写一个查询来检查任一子查询(而不是一个子查询)是否正确? SELECT * FROM employees e WHERE NOT EXISTS (
我找到了很多关于我的问题的答案,但问题没有解决 我有表格,有数据,例如: Data 1 Data 2 Data 3
以下查询返回错误: 查询: SELECT Id, FirstName, LastName, OwnerId, PersonEmail FROM Account WHERE lower(PersonEm
以下查询返回错误: 查询: SELECT Id, FirstName, LastName, OwnerId, PersonEmail FROM Account WHERE lower(PersonEm
我从 EditText 中获取了 String 值。以及提交查询的按钮。 String sql=editQuery.getText().toString();// SELECT * FROM empl
我有一个或多或少有效的查询(关于结果),但处理大约需要 45 秒。这对于在 GUI 中呈现数据来说肯定太长了。 所以我的需求是找到一个更快/更高效的查询(几毫秒左右会很好)我的数据表大约有 3000
这是我第一次使用 Stack Overflow,所以我希望我以正确的方式提出这个问题。 我有 2 个 SQL 查询,我正在尝试比较和识别缺失值,尽管我无法将 NULL 字段添加到第二个查询中以识别缺失
什么是动态 SQL 查询?何时需要使用动态 SQL 查询?我使用的是 SQL Server 2005。 最佳答案 这里有几篇文章: Introduction to Dynamic SQL Dynami
include "mysql.php"; $query= "SELECT ID,name,displayname,established,summary,searchlink,im
我有一个查询要“转换”为 mysql。这是查询: select top 5 * from (select id, firstName, lastName, sum(fileSize) as To
通过我的研究,我发现至少从 EF 4.1 开始,EF 查询上的 .ToString() 方法将返回要运行的 SQL。事实上,这对我来说非常有用,使用 Entity Framework 5 和 6。 但
我在构造查询来执行以下操作时遇到问题: 按activity_type_id过滤联系人,仅显示最近事件具有所需activity_type_id或为NULL(无事件)的联系人 表格结构如下: 一个联系人可
如何让我输入数据库的信息在输入数据 5 分钟后自行更新? 假设我有一张 table : +--+--+-----+ |id|ip|count| +--+--+-----+ |
我正在尝试搜索正好是 4 位数字的 ID,我知道我需要使用 LENGTH() 字符串函数,但找不到如何使用它的示例。我正在尝试以下(和其他变体)但它们不起作用。 SELECT max(car_id)
我有一个在 mysql 上运行良好的 sql 查询(查询 + 连接): select sum(pa.price) from user u , purchase pu , pack pa where (
我是一名优秀的程序员,十分优秀!