diff --git a/src/main/java/com/dd/admin/business/api/ApiController.java b/src/main/java/com/dd/admin/business/api/ApiController.java
index 63d2777..f61478e 100644
--- a/src/main/java/com/dd/admin/business/api/ApiController.java
+++ b/src/main/java/com/dd/admin/business/api/ApiController.java
@@ -15,6 +15,7 @@ import com.dd.admin.business.noteImg.service.NoteImgService;
 import com.dd.admin.business.upNotes.domain.UpNotesDto;
 import com.dd.admin.business.upNotes.domain.UpNotesVo;
 import com.dd.admin.business.upNotes.service.UpNotesService;
+import com.dd.admin.business.view.service.ViewService;
 import com.dd.admin.common.aop.operationLog.aop.OperLog;
 import com.dd.admin.common.aop.operationLog.aop.OperType;
 import com.dd.admin.common.exception.ApiException;
@@ -52,6 +53,8 @@ public class ApiController {
     UpNotesService upNotesService;
     @Autowired
     private JwtTokenUtil jwtTokenUtil;
+    @Autowired
+    ViewService viewService;
     @ApiOperation(value = "获取所有笔记")
     @ApiOperationSupport(order = 1)
     @GetMapping("/api/notes")
@@ -102,6 +105,8 @@ public class ApiController {
         }
         if(StringUtil.isNotEmpty(followId)){
             noteDto.setFollowId(followId);
+            //读取笔记
+            viewService.viewNote(followId,noteDto.getNoteId());
         }
         NoteVo noteVo = noteService.selectNoteDetail(noteDto);
         if(noteVo==null){
diff --git a/src/main/java/com/dd/admin/business/note/domain/NoteVo.java b/src/main/java/com/dd/admin/business/note/domain/NoteVo.java
index ae3b741..67721fd 100644
--- a/src/main/java/com/dd/admin/business/note/domain/NoteVo.java
+++ b/src/main/java/com/dd/admin/business/note/domain/NoteVo.java
@@ -52,7 +52,6 @@ public class NoteVo {
     private String authorId;
 
 
-
     @ApiModelProperty(value = "作者头像")
     private String authorAvatar;
 
diff --git a/src/main/java/com/dd/admin/business/note/mapper/xml/NoteMapper.xml b/src/main/java/com/dd/admin/business/note/mapper/xml/NoteMapper.xml
index 981062e..2bcb5d8 100644
--- a/src/main/java/com/dd/admin/business/note/mapper/xml/NoteMapper.xml
+++ b/src/main/java/com/dd/admin/business/note/mapper/xml/NoteMapper.xml
@@ -130,26 +130,25 @@
     <select id="selectNoteDetail" resultType="com.dd.admin.business.note.domain.NoteVo"
             parameterType="java.lang.String">
         SELECT
-        a.*,
-        (SELECT
-        COALESCE (COUNT(e.note_id), 0)
+        (
+        SELECT
+        IFNULL(COUNT(e.note_id), 0)
         FROM
         business_star_notes e
         WHERE
         e.note_id = a.note_id
-        GROUP BY
-        e.note_id
         ) AS starCount,
         (
         SELECT
-        COALESCE (COUNT(d.note_id), 0)
+        IFNULL(COUNT(d.note_id), 0)
         FROM
         business_up_notes d
         WHERE
         d.note_id = a.note_id
-        GROUP BY
-        d.note_id
-        ) AS upCount
+        ) AS upCount,
+        d.AVATAR_URL AS authorAvatar,
+        a.*,
+        d.AUTHOR_NAME AS authorName
         -- 使用 CASE WHEN 语句判断是否存在当前用户（通过传入的 followId）对笔记的收藏记录，有则为 true，否则为 false
         <if test="noteDto.followId != null and noteDto.followId != ''">
             ,CASE WHEN EXISTS (
@@ -170,7 +169,10 @@
         LEFT JOIN
         business_star_notes b ON a.note_id = b.note_id
         LEFT JOIN
-        business_up_notes c ON a.note_id = c.note_id where a.deleted = 0
+        business_up_notes c ON a.note_id = c.note_id
+        LEFT JOIN
+        business_author d ON a.author_id = d.author_id
+        where a.deleted = 0
         <if test="noteDto.authorId != null and noteDto.authorId != ''">
             and a.AUTHOR_ID = #{noteDto.authorId}
         </if>
diff --git a/src/main/java/com/dd/admin/business/notice/controller/NoticeController.java b/src/main/java/com/dd/admin/business/notice/controller/NoticeController.java
index c14812c..6384ba1 100644
--- a/src/main/java/com/dd/admin/business/notice/controller/NoticeController.java
+++ b/src/main/java/com/dd/admin/business/notice/controller/NoticeController.java
@@ -53,7 +53,7 @@ public class NoticeController {
     @Autowired
     private TioWebSocketServerBootstrap bootstrap;
 
-    @ApiOperation(value = "通知公告表-添加")
+    @ApiOperation(value = "发送通知")
     @ApiOperationSupport(order = 3)
     @PostMapping("/admin/notice/sendNotice")
     public ResultBean<Notice> sendNotice(@RequestBody @Validated SendNoticeDto sendNoticeDto) {
diff --git a/src/main/java/com/dd/admin/business/view/controller/ViewController.java b/src/main/java/com/dd/admin/business/view/controller/ViewController.java
new file mode 100644
index 0000000..67c0c1d
--- /dev/null
+++ b/src/main/java/com/dd/admin/business/view/controller/ViewController.java
@@ -0,0 +1,88 @@
+package com.dd.admin.business.view.controller;
+
+import cn.hutool.core.bean.BeanUtil;
+import com.github.xiaoymin.knife4j.annotations.ApiOperationSupport;
+import org.springframework.web.bind.annotation.*;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import com.dd.admin.common.model.UpdateGroup;
+import com.dd.admin.common.model.result.ResultBean;
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.validation.annotation.Validated;
+import javax.validation.constraints.NotBlank;
+import com.dd.admin.business.view.entity.View;
+import com.dd.admin.business.view.domain.ViewVo;
+import com.dd.admin.business.view.domain.ViewDto;
+import com.dd.admin.business.view.service.ViewService;
+
+import java.util.List;
+
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * <p>
+ * 查看 前端控制器
+ * </p>
+ *
+ * @author 727869402@qq.com
+ * @since 2025-01-15
+ */
+@Api(tags = "查看")
+@RestController
+public class ViewController {
+
+    @Autowired
+    ViewService viewService;
+
+    @ApiOperation(value = "查看-分页列表")
+    @ApiOperationSupport(order = 1)
+    @GetMapping("/admin/view/page")
+    public ResultBean<IPage<ViewVo>> page(ViewDto viewDto) {
+        IPage<ViewVo> pageInfo = viewService.selectViewPage(viewDto);
+        return ResultBean.success(pageInfo);
+    }
+
+    @ApiOperation(value = "查看-列表")
+    @ApiOperationSupport(order = 2)
+    @GetMapping("/admin/view/list")
+    public ResultBean<List<ViewVo>> list(ViewDto viewDto) {
+        List<ViewVo> list = viewService.selectViewList(viewDto);
+        return ResultBean.success(list);
+    }
+
+    @ApiOperation(value = "查看-添加")
+    @ApiOperationSupport(order = 3)
+    @PostMapping("/admin/view/add")
+    public ResultBean<View> add(@RequestBody @Validated ViewDto viewDto) {
+        View view = BeanUtil.copyProperties(viewDto, View.class);
+        viewService.save(view);
+        return ResultBean.success(view);
+    }
+
+    @ApiOperation(value = "查看-查询")
+    @ApiOperationSupport(order = 4)
+    @GetMapping("/admin/view/{viewId}")
+    public ResultBean<ViewVo> get(@PathVariable @NotBlank String viewId) {
+        View view = viewService.getById(viewId);
+        ViewVo viewVo = BeanUtil.copyProperties(view,ViewVo.class);
+        return ResultBean.success(viewVo);
+    }
+
+    @ApiOperation(value = "查看-修改")
+    @ApiOperationSupport(order = 5)
+    @PostMapping("/admin/view/update")
+    public ResultBean<View> update(@RequestBody @Validated(UpdateGroup.class) ViewDto viewDto) {
+        View view = BeanUtil.copyProperties(viewDto, View.class);
+        viewService.updateById(view);
+        return ResultBean.success(view);
+    }
+
+    @ApiOperation(value = "查看-删除")
+    @ApiOperationSupport(order = 6)
+    @GetMapping("/admin/view/delete/{viewId}")
+    public ResultBean<View> delete(@PathVariable @NotBlank String viewId) {
+        Boolean b = viewService.removeById(viewId);
+        return ResultBean.success(b);
+    }
+}
diff --git a/src/main/java/com/dd/admin/business/view/domain/ViewDto.java b/src/main/java/com/dd/admin/business/view/domain/ViewDto.java
new file mode 100644
index 0000000..43b4635
--- /dev/null
+++ b/src/main/java/com/dd/admin/business/view/domain/ViewDto.java
@@ -0,0 +1,52 @@
+package com.dd.admin.business.view.domain;
+
+import com.baomidou.mybatisplus.annotation.TableName;
+import com.baomidou.mybatisplus.annotation.IdType;
+import java.util.Date;
+import com.baomidou.mybatisplus.annotation.Version;
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.FieldFill;
+import com.baomidou.mybatisplus.annotation.TableField;
+import java.io.Serializable;
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import javax.validation.constraints.NotBlank;
+import com.dd.admin.common.model.UpdateGroup;
+
+
+/**
+ * <p>
+ * 查看返回对象
+ * </p>
+ *
+ * @author 727869402@qq.com
+ * @since 2025-01-15
+ */
+@Data
+@ApiModel(value="查看接收对象")
+public class ViewDto {
+
+
+    @ApiModelProperty(value = "查看id")
+    @NotBlank(message = "查看id不能为空",groups = UpdateGroup.class)
+    private String viewId;
+
+    @ApiModelProperty(value = "作者id")
+    private String authorId;
+
+    @ApiModelProperty(value = "作者姓名")
+    private String authorName;
+
+    @ApiModelProperty(value = "笔记id")
+    private String noteId;
+
+    @ApiModelProperty(value = "笔记名")
+    private String noteName;
+
+    @ApiModelProperty(value = "创建时间")
+    private Date createTime;
+
+
+}
diff --git a/src/main/java/com/dd/admin/business/view/domain/ViewVo.java b/src/main/java/com/dd/admin/business/view/domain/ViewVo.java
new file mode 100644
index 0000000..bf3b35a
--- /dev/null
+++ b/src/main/java/com/dd/admin/business/view/domain/ViewVo.java
@@ -0,0 +1,48 @@
+package com.dd.admin.business.view.domain;
+
+import com.baomidou.mybatisplus.annotation.TableName;
+import com.baomidou.mybatisplus.annotation.IdType;
+import java.util.Date;
+import com.baomidou.mybatisplus.annotation.Version;
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.FieldFill;
+import com.baomidou.mybatisplus.annotation.TableField;
+import java.io.Serializable;
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+
+/**
+ * <p>
+ * 查看返回对象
+ * </p>
+ *
+ * @author 727869402@qq.com
+ * @since 2025-01-15
+ */
+@Data
+@ApiModel(value="查看返回对象")
+public class ViewVo {
+
+
+    @ApiModelProperty(value = "查看id")
+    private String viewId;
+
+    @ApiModelProperty(value = "作者id")
+    private String authorId;
+
+    @ApiModelProperty(value = "作者姓名")
+    private String authorName;
+
+    @ApiModelProperty(value = "笔记id")
+    private String noteId;
+
+    @ApiModelProperty(value = "笔记名")
+    private String noteName;
+
+    @ApiModelProperty(value = "创建时间")
+    private Date createTime;
+
+
+}
diff --git a/src/main/java/com/dd/admin/business/view/entity/View.java b/src/main/java/com/dd/admin/business/view/entity/View.java
new file mode 100644
index 0000000..ec39e4c
--- /dev/null
+++ b/src/main/java/com/dd/admin/business/view/entity/View.java
@@ -0,0 +1,57 @@
+package com.dd.admin.business.view.entity;
+
+import com.baomidou.mybatisplus.annotation.TableName;
+import com.baomidou.mybatisplus.annotation.IdType;
+import java.util.Date;
+import com.baomidou.mybatisplus.annotation.Version;
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.FieldFill;
+import com.baomidou.mybatisplus.annotation.TableField;
+import java.io.Serializable;
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+
+/**
+ * <p>
+ * 查看
+ * </p>
+ *
+ * @author 727869402@qq.com
+ * @since 2025-01-15
+ */
+@Data
+@EqualsAndHashCode(callSuper = false)
+@TableName("business_view")
+@ApiModel(value="View对象", description="查看")
+public class View implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+
+    @ApiModelProperty(value = "查看id")
+    @TableId(value = "VIEW_ID", type = IdType.ASSIGN_UUID)
+    private String viewId;
+
+    @ApiModelProperty(value = "作者id")
+    @TableField("AUTHOR_ID")
+    private String authorId;
+
+    @ApiModelProperty(value = "作者姓名")
+    @TableField("AUTHOR_NAME")
+    private String authorName;
+
+    @ApiModelProperty(value = "笔记id")
+    @TableField("NOTE_ID")
+    private String noteId;
+
+    @ApiModelProperty(value = "笔记名")
+    @TableField("NOTE_NAME")
+    private String noteName;
+
+    @ApiModelProperty(value = "创建时间")
+    @TableField(value = "CREATE_TIME", fill = FieldFill.INSERT)
+    private Date createTime;
+
+
+}
diff --git a/src/main/java/com/dd/admin/business/view/mapper/ViewMapper.java b/src/main/java/com/dd/admin/business/view/mapper/ViewMapper.java
new file mode 100644
index 0000000..21f1985
--- /dev/null
+++ b/src/main/java/com/dd/admin/business/view/mapper/ViewMapper.java
@@ -0,0 +1,28 @@
+package com.dd.admin.business.view.mapper;
+
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.dd.admin.business.view.entity.View;
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.dd.admin.business.view.domain.ViewVo;
+import com.dd.admin.business.view.domain.ViewDto;
+
+import java.util.List;
+
+/**
+ * <p>
+ * 查看 Mapper 接口
+ * </p>
+ *
+ * @author 727869402@qq.com
+ * @since 2025-01-15
+ */
+@Mapper
+public interface ViewMapper extends BaseMapper<View> {
+
+    IPage<ViewVo> selectViewPage(Page<ViewVo> page, @Param("viewDto") ViewDto viewDto);
+
+    List<ViewVo> selectViewList(@Param("viewDto") ViewDto viewDto);
+}
diff --git a/src/main/java/com/dd/admin/business/view/mapper/xml/ViewMapper.xml b/src/main/java/com/dd/admin/business/view/mapper/xml/ViewMapper.xml
new file mode 100644
index 0000000..022ee97
--- /dev/null
+++ b/src/main/java/com/dd/admin/business/view/mapper/xml/ViewMapper.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.dd.admin.business.view.mapper.ViewMapper">
+
+    <!-- 通用查询映射结果 -->
+    <resultMap id="BaseResultMap" type="com.dd.admin.business.view.entity.View">
+        <id column="VIEW_ID" property="viewId" />
+        <result column="AUTHOR_ID" property="authorId" />
+        <result column="AUTHOR_NAME" property="authorName" />
+        <result column="NOTE_ID" property="noteId" />
+        <result column="NOTE_NAME" property="noteName" />
+        <result column="CREATE_TIME" property="createTime" />
+    </resultMap>
+
+    <!-- 通用查询结果列 -->
+    <sql id="Base_Column_List">
+        VIEW_ID, AUTHOR_ID, AUTHOR_NAME, NOTE_ID, NOTE_NAME, CREATE_TIME
+    </sql>
+
+    <select id="selectViewPage" resultType="com.dd.admin.business.view.domain.ViewVo">
+        select
+        *
+        from business_view where 1 = 1
+    </select>
+
+    <select id="selectViewList" resultType="com.dd.admin.business.view.domain.ViewVo">
+        select
+        *
+        from business_view where 1 = 1
+    </select>
+</mapper>
diff --git a/src/main/java/com/dd/admin/business/view/service/ViewService.java b/src/main/java/com/dd/admin/business/view/service/ViewService.java
new file mode 100644
index 0000000..a24d52a
--- /dev/null
+++ b/src/main/java/com/dd/admin/business/view/service/ViewService.java
@@ -0,0 +1,29 @@
+package com.dd.admin.business.view.service;
+
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import com.dd.admin.business.view.entity.View;
+import com.baomidou.mybatisplus.extension.service.IService;
+import com.dd.admin.business.view.domain.ViewVo;
+import com.dd.admin.business.view.domain.ViewDto;
+import java.util.List;
+
+/**
+ * <p>
+ * 查看 服务类
+ * </p>
+ *
+ * @author 727869402@qq.com
+ * @since 2025-01-15
+ */
+public interface ViewService extends IService<View> {
+
+    //查看-分页列表
+    IPage<ViewVo> selectViewPage(ViewDto viewDto);
+
+    //查看-列表
+    List<ViewVo> selectViewList(ViewDto viewDto);
+
+
+    View viewNote(String authorId,String noteId);
+
+}
diff --git a/src/main/java/com/dd/admin/business/view/service/impl/ViewServiceImpl.java b/src/main/java/com/dd/admin/business/view/service/impl/ViewServiceImpl.java
new file mode 100644
index 0000000..4e982c0
--- /dev/null
+++ b/src/main/java/com/dd/admin/business/view/service/impl/ViewServiceImpl.java
@@ -0,0 +1,45 @@
+package com.dd.admin.business.view.service.impl;
+
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.dd.admin.common.model.PageFactory;
+import com.dd.admin.business.view.entity.View;
+import com.dd.admin.business.view.mapper.ViewMapper;
+import com.dd.admin.business.view.service.ViewService;
+import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import org.springframework.stereotype.Service;
+import com.dd.admin.business.view.domain.ViewVo;
+import com.dd.admin.business.view.domain.ViewDto;
+import java.util.List;
+
+/**
+ * <p>
+ * 查看 服务实现类
+ * </p>
+ *
+ * @author 727869402@qq.com
+ * @since 2025-01-15
+ */
+@Service
+public class ViewServiceImpl extends ServiceImpl<ViewMapper, View> implements ViewService {
+
+    @Override
+    public IPage<ViewVo> selectViewPage(ViewDto viewDto) {
+        Page page = PageFactory.defaultPage();
+        return baseMapper.selectViewPage(page,viewDto);
+    }
+
+    @Override
+    public List<ViewVo> selectViewList(ViewDto viewDto) {
+        return baseMapper.selectViewList(viewDto);
+    }
+
+    @Override
+    public View viewNote(String authorId, String noteId) {
+        View view = new View();
+        view.setAuthorId(authorId);
+        view.setNoteId(noteId);
+        save(view);
+        return view;
+    }
+}
diff --git a/web/src/api/business/view/view.js b/web/src/api/business/view/view.js
new file mode 100644
index 0000000..0c55413
--- /dev/null
+++ b/web/src/api/business/view/view.js
@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+
+export function getViewPage(params) {
+    return request({
+        url: '/admin/view/page',
+        method: 'get',
+        params
+    })
+}
+
+export function getViewList(params) {
+    return request({
+        url: '/admin/view/list',
+        method: 'get',
+        params
+    })
+}
+
+export function addView(data) {
+    return request({
+        url: '/admin/view/add',
+        method: 'post',
+        data: data
+    })
+}
+
+export function editView(data) {
+    return request({
+        url: '/admin/view/update',
+        method: 'post',
+        data: data
+    })
+}
+
+export function deleteView(viewId) {
+    return request({
+        url: '/admin/view/delete/' + viewId,
+        method: 'get'
+    })
+}
+
diff --git a/web/src/views/business/author/addAuthor.vue b/web/src/views/business/author/addAuthor.vue
index 58296d2..0843a69 100644
--- a/web/src/views/business/author/addAuthor.vue
+++ b/web/src/views/business/author/addAuthor.vue
@@ -18,7 +18,7 @@
         style="height: 90%;"
       >
 
-                  <el-form-item label="作者id" prop="authorId"  class="is-required">
+         <el-form-item label="作者id" prop="authorId"  class="is-required">
             <el-input v-model="temp.authorId" placeholder="作者id" />
           </el-form-item>
 
diff --git a/web/src/views/business/view/addView.vue b/web/src/views/business/view/addView.vue
new file mode 100644
index 0000000..1988b69
--- /dev/null
+++ b/web/src/views/business/view/addView.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <el-dialog
+      :close-on-click-modal="false"
+      top="8vh"
+      width="40%"
+      :visible.sync="dialogVisible"
+      center
+      @close="handleCancel"
+    >
+      <div class="el-dialog-div">
+      <el-form
+        :rules="rules"
+        ref="dataForm"
+        :model="temp"
+        label-position="right"
+        label-width="120px"
+        style="height: 90%;"
+      >
+
+                  <el-form-item label="查看id" prop="viewId"  class="is-required">
+            <el-input v-model="temp.viewId" placeholder="查看id" />
+          </el-form-item>
+
+          <el-form-item label="作者id" prop="authorId"  class="is-required">
+            <el-input v-model="temp.authorId" placeholder="作者id" />
+          </el-form-item>
+
+          <el-form-item label="作者姓名" prop="authorName"  class="is-required">
+            <el-input v-model="temp.authorName" placeholder="作者姓名" />
+          </el-form-item>
+
+          <el-form-item label="笔记id" prop="noteId"  class="is-required">
+            <el-input v-model="temp.noteId" placeholder="笔记id" />
+          </el-form-item>
+
+          <el-form-item label="笔记名" prop="noteName"  class="is-required">
+            <el-input v-model="temp.noteName" placeholder="笔记名" />
+          </el-form-item>
+
+          <el-form-item label="创建时间" prop="createTime"  class="is-required">
+            <el-input v-model="temp.createTime" placeholder="创建时间" />
+          </el-form-item>
+
+
+      </el-form>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleCancel">取 消</el-button>
+        <el-button type="primary" @click="submit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {addView} from "@/api/business/view/view";
+import {setRequiredFields} from "@/utils";
+const requiredFields = []
+export default {
+  name: "addForm",
+  data() {
+    return {
+      rules: setRequiredFields(requiredFields),
+      dialogVisible: false,
+      temp: {
+        viewId:'',
+        authorId:'',
+        authorName:'',
+        noteId:'',
+        noteName:'',
+        createTime:'',
+      },
+    }
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true
+    },
+    submit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          addView(this.temp).then(response =>{
+            this.handleCancel()
+            this.$emit('ok', response.data)
+          })
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    handleCancel() {
+      //初始化
+      this.temp = this.$options.data().temp
+      this.dialogVisible = false
+      this.$refs['dataForm'].resetFields();
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/web/src/views/business/view/editView.vue b/web/src/views/business/view/editView.vue
new file mode 100644
index 0000000..ef96ef6
--- /dev/null
+++ b/web/src/views/business/view/editView.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <el-dialog
+      :close-on-click-modal="false"
+      top="8vh"
+      width="40%"
+      :visible.sync="dialogVisible"
+      center
+      @close="handleCancel"
+    >
+      <div class="el-dialog-div">
+      <el-form
+        :rules="rules"
+        ref="dataForm"
+        :model="temp"
+        label-position="right"
+        label-width="120px"
+        style="height: 90%;"
+      >
+
+                <el-form-item label="查看id" prop="viewId" class="is-required">
+          <el-input v-model="temp.viewId" placeholder="查看id" />
+        </el-form-item>
+
+        <el-form-item label="作者id" prop="authorId" class="is-required">
+          <el-input v-model="temp.authorId" placeholder="作者id" />
+        </el-form-item>
+
+        <el-form-item label="作者姓名" prop="authorName" class="is-required">
+          <el-input v-model="temp.authorName" placeholder="作者姓名" />
+        </el-form-item>
+
+        <el-form-item label="笔记id" prop="noteId" class="is-required">
+          <el-input v-model="temp.noteId" placeholder="笔记id" />
+        </el-form-item>
+
+        <el-form-item label="笔记名" prop="noteName" class="is-required">
+          <el-input v-model="temp.noteName" placeholder="笔记名" />
+        </el-form-item>
+
+        <el-form-item label="创建时间" prop="createTime" class="is-required">
+          <el-input v-model="temp.createTime" placeholder="创建时间" />
+        </el-form-item>
+
+      </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleCancel">取 消</el-button>
+        <el-button type="primary" @click="submit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { editView } from "@/api/business/view/view";
+import {setRequiredFields} from "@/utils";
+const requiredFields = []
+
+export default {
+  name: "editForm",
+  data() {
+    return {
+      rules: setRequiredFields(requiredFields),
+      dialogVisible: false,
+      temp: {
+        viewId:'',
+        authorId:'',
+        authorName:'',
+        noteId:'',
+        noteName:'',
+        createTime:'',
+      },
+    }
+  },
+  methods: {
+    open(row) {
+      this.temp = this.$options.data().temp
+      this.temp = row
+      this.dialogVisible = true
+    },
+    submit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          editView(this.temp).then(response => {
+            this.handleCancel()
+            this.$emit('ok', response.data)
+          })
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    handleCancel() {
+      //初始化
+      this.temp = this.$options.data().temp
+      this.dialogVisible = false
+      this.$refs['dataForm'].resetFields()
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/web/src/views/business/view/viewList.vue b/web/src/views/business/view/viewList.vue
new file mode 100644
index 0000000..65afd95
--- /dev/null
+++ b/web/src/views/business/view/viewList.vue
@@ -0,0 +1,243 @@
+<template>
+    <div class="app-container">
+
+        <div class="filter-container">
+            <el-input
+                    v-model="listQuery.keyword"
+                    size="small"
+                    placeholder="请输入关键词"
+                    clearable
+                    class="filter-item"
+                    style="width: 200px;margin-left: 10px;"
+            />
+            <el-button-group style="margin-left: 10px;">
+                <el-button
+                        size="small"
+                        class="filter-item"
+                        type="primary"
+                        icon="el-icon-search"
+                        @click="search"
+                >
+                    搜索
+                </el-button>
+                <el-button
+                        size="small"
+                        class="filter-item"
+                        type="primary"
+                        icon="el-icon-refresh"
+                        @click="refresh"
+                >
+                    重置
+                </el-button>
+            </el-button-group>
+            <el-button
+                    size="small"
+                    class="filter-item"
+                    type="primary"
+                    icon="el-icon-plus"
+                    style="margin-left: 10px;"
+                    @click="add"
+            >
+                新增
+            </el-button>
+        </div>
+
+        <el-table
+                v-loading="listLoading"
+                :data="list"
+                element-loading-text="Loading"
+                border
+                fit
+                height="100%"
+                class="table-container"
+                highlight-current-row
+        >
+
+            <el-table-column
+                    label="序号"
+                    width="150"
+                    align="center"
+            >
+                <template slot-scope="scope">
+                    {{ scope.$index+1 }}
+                </template>
+            </el-table-column>
+                  <el-table-column
+                    label="查看id"
+                    width="160"
+                    align="center"
+            >
+                <template slot-scope="scope">
+                    {{ scope.row.viewId }}
+                </template>
+            </el-table-column>
+
+            <el-table-column
+                    label="作者id"
+                    width="160"
+                    align="center"
+            >
+                <template slot-scope="scope">
+                    {{ scope.row.authorId }}
+                </template>
+            </el-table-column>
+
+            <el-table-column
+                    label="作者姓名"
+                    width="160"
+                    align="center"
+            >
+                <template slot-scope="scope">
+                    {{ scope.row.authorName }}
+                </template>
+            </el-table-column>
+
+            <el-table-column
+                    label="笔记id"
+                    width="160"
+                    align="center"
+            >
+                <template slot-scope="scope">
+                    {{ scope.row.noteId }}
+                </template>
+            </el-table-column>
+
+            <el-table-column
+                    label="笔记名"
+                    width="160"
+                    align="center"
+            >
+                <template slot-scope="scope">
+                    {{ scope.row.noteName }}
+                </template>
+            </el-table-column>
+
+            <el-table-column
+                    label="创建时间"
+                    width="160"
+                    align="center"
+            >
+                <template slot-scope="scope">
+                    {{ scope.row.createTime }}
+                </template>
+            </el-table-column>
+
+
+            <el-table-column
+                    fixed="right"
+                    label="操作"
+                    width="200"
+                    align="center"
+            >
+                <template slot-scope="scope">
+                    <el-button-group>
+                        <el-button
+                                type="primary"
+                                icon="el-icon-edit"
+                                size="mini"
+                                @click="edit(scope)"
+                        >
+                            修改
+                        </el-button>
+                        <el-button
+                                type="danger"
+                                icon="el-icon-delete"
+                                size="mini"
+                                @click="del(scope)"
+                        >
+                            删除
+                        </el-button>
+                    </el-button-group>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination
+                :total="total"
+                :page.sync="listQuery.page"
+                :limit.sync="listQuery.limit"
+                @pagination="fetchData"
+        />
+
+        <add-form ref="addForm" @ok="addOk"  />
+        <edit-form ref="editForm" @ok="editOk"  />
+
+    </div>
+</template>
+
+<script>
+import {getViewPage,deleteView} from "@/api/business/view/view";
+import {deepClone,success} from "@/utils";
+
+import confirm from "@/utils/confirm";
+import Pagination from '@/components/Pagination'
+import addForm from "@/views/business/view/addView";
+import editForm from "@/views/business/view/editView";
+
+export default {
+    name: 'view',
+    components: {addForm,editForm,Pagination},
+    data() {
+        return {
+            total: 0,
+            list: [],
+            listLoading: true,
+            listQuery: {
+                page: 1,
+                limit: 50,
+                keyword: ''
+            },
+            temp: {},
+        }
+    },
+    created() {
+        this.fetchData()
+    },
+    methods: {
+        search() {
+            this.fetchData()
+        },
+        refresh() {
+            this.listQuery = this.$options.data().listQuery
+            this.fetchData()
+        },
+        fetchData() {
+            this.listLoading = true
+            getViewPage(this.listQuery).then(response => {
+                const { records, total } = response.data
+                this.list = records
+                this.total = total
+                this.listLoading = false
+            })
+        },
+        add(){
+            this.$refs.addForm.open()
+        },
+        addOk(){
+            this.fetchData()
+        },
+        edit(scope) {
+            const temp = deepClone(scope.row)
+            this.$refs.editForm.open(temp)
+        },
+        editOk(){
+            this.fetchData()
+        },
+        del(scope) {
+            confirm("确定要删除吗？").then(res=>{
+                if(res){
+                    deleteView(scope.row.viewId).then(response => {
+                        console.log(response)
+                        success('删除成功')
+                        this.fetchData()
+                    })
+                }
+            })
+        },
+    }
+}
+</script>
+
+<style scoped>
+
+</style>