调整文章列表样式#长度限制

Author: shimh-develop

blog-api/src/main/java/com/shimh/entity/Article.java

@@ -43,10 +43,10 @@ public class Article extends BaseEntity<Integer>{
 	private static final long serialVersionUID = -4470366380115322213L;
 
 
-	@Column(name = "title", length = 64)
+	@Column(name = "title", length = 40)
 	private String title;
 
-	@Column(name = "summary", length = 50)
+	@Column(name = "summary", length = 100)
 	private String summary;
 
 

blog-api/src/main/java/com/shimh/entity/User.java

@@ -35,7 +35,7 @@ public class User extends BaseEntity<Long>{
 
 
 	@NotBlank
-	@Column(name = "account", unique = true, length = 64)
+	@Column(name = "account", unique = true, length = 10)
 	private String account;
 
 	/**
@@ -50,10 +50,11 @@ public class User extends BaseEntity<Long>{
      */
     private String avatar;
 
-	@Column(name = "email", unique = true, length = 128)
+	@Column(name = "email", unique = true, length = 20)
 	private String email;  // 邮箱
 
 	@NotBlank
+	@Column(name = "nickname", length = 10)
     private String nickname;
 
     @Column(name = "mobile_phone_number",length = 20)

blog-app/src/components/article/ArticleItem.vue

@@ -2,7 +2,7 @@
 <el-card class="me-area" :body-style="{ padding: '16px' }">
 	  <div class="me-article-header">
 
-	    <a @click="view(id)" >{{title}}</a>
+	    <a @click="view(id)" class="me-article-title">{{title}}</a>
 	    <el-button v-if="weight > 0" class="me-article-icon" type="text">置顶</el-button>
 	    <span class="me-pull-right me-article-count">
 	    	<i class="me-icon-comment"></i>&nbsp;{{commentCounts}}
@@ -64,40 +64,31 @@ export default {
 	padding-bottom: 10px;
 }
 .me-article-title {
-	color: #333;
+	font-weight: 600;
 }
 .me-article-icon {
 	padding: 3px 8px;
 }
 .me-article-count {
 	color: #a6a6a6;
 	padding-left: 14px;
+	font-size: 13px;
 }
 .me-pull-right {
 	float: right;
 }
 .me-artile-description {
 	font-size: 13px;
-	line-height: 20px;
-	/*padding-left: 10px;*/
+	line-height: 24px;
 	margin-bottom: 10px;
-	/*text-indent: 2.5em;*/
 }
 .me-article-author {
-	padding-left: 10px;
 	color: #a6a6a6;
 	padding-right: 18px;
-	
+	font-size: 13px;
 }
 .el-tag {
 	margin-left: 6px;
 }
 
-/*.me-article-title {
-	font-weight: 700;
-}*/
-
-/*.el-card > div:first {
-	padding: 10px 16px!important;
-}*/
 </style>

blog-app/src/views/Login.vue

@@ -42,10 +42,12 @@ export default {
       		},
       		rules: {
 	          account: [
-	            { required: true, message: '请输入用户名', trigger: 'blur' }
+	            { required: true, message: '请输入用户名', trigger: 'blur' },
+	            { max: 10, message: '不能大于10个字符', trigger: 'blur' }
 	          ],
 	          password: [
-	            { required: true, message: '请输入密码', trigger: 'blur' }
+	            { required: true, message: '请输入密码', trigger: 'blur' },
+	            { max: 10, message: '不能大于10个字符', trigger: 'blur' }
 	          ]
 	        }
 	      }

blog-app/src/views/Register.vue

@@ -48,13 +48,16 @@ export default {
 	      },
       	rules: {
 	    	account: [
-	        	{ required: true, message: '请输入用户名', trigger: 'blur' }
+	        	{ required: true, message: '请输入用户名', trigger: 'blur' },
+	        	{ max: 10, message: '不能大于10个字符', trigger: 'blur' }
 	      	],
 	      	nickname: [
-	      		{ required: true, message: '请输入昵称', trigger: 'blur' }
+	      		{ required: true, message: '请输入昵称', trigger: 'blur' },
+	      		{ max: 10, message: '不能大于10个字符', trigger: 'blur' }
 	      	],
 	      	password: [
-	        	{ required: true, message: '请输入密码', trigger: 'blur' }
+	        	{ required: true, message: '请输入密码', trigger: 'blur' },
+	        	{ max: 10, message: '不能大于10个字符', trigger: 'blur' }
 	      	]
 	    }
       

blog-app/src/views/blog/BlogWrite.vue

@@ -126,7 +126,8 @@ export default {
 	    },
         rules: {
 	      	summary: [
-	        	{ required: true, message: '请输入摘要', trigger: 'blur' }
+	        	{ required: true, message: '请输入摘要', trigger: 'blur' },
+	        	{ max: 10, message: '不能大于80个字符', trigger: 'blur' }
 	      	],
 	      	category: [
 	        	{ required: true, message: '请选择文章分类', trigger: 'change' }
@@ -144,6 +145,11 @@ export default {
   			return
   		}
   		
+  		if(this.articleForm.title.length > 30){
+  			this.$message({message: '标题不能大于30个字符',type: 'warning',showClose: true})
+  			return
+  		}
+  		
   		if(!this.articleForm.editor.ref.d_render){
   			this.$message({message: '内容不能为空哦',type: 'warning',showClose: true})
   			return