VUE-运用组件实现评论列表,把列表存到本地 localStorage,防止刷新后数据消失

博客介绍了DOM结构中评论子组件与父组件内容,重点探讨点击【发表评论】后,最新评论显示在列表最上方的实现方法。包括将评论数据存到localStorage,组织评论数据对象,处理新旧评论数据,存储最新评论列表,清空输入及向父组件传值等步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、dom结构说明:

【评论人、评论内容、发表评论】是子组件内容;评论列表是父组件内容;

2、功能点:点击【发表评论】,最新评论的内容显示在评论列表的最上面,如何实现?

分析:

// 1. 发表评论的数据存到localStorage 中,关于localStorage ,说明几点:

  • a. localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的;
  • b. localStorage只支持string类型的存储
  • c. localStorage.setItem(key,value):将value存储到key字段,如果value是JSON对象,需要使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串
  • d. localStorage.getItem(key):获取指定key本地存储的值
  • e. 如果需要将JSON字符串转为JSON,则使用JSON.parse()方法实现

// 2. 先组织出一个最新的评论数据对象

// 3. 在保存最新的评论数据之前,要先从 localStorage 获取到之前的评论数据(string),转换为一个数组对象;如果获取到的localStorage 中的评论字符串,为空不存在, 则可以返回一个 '[]' 让 JSON.parse 去转换;然后,把最新的评论,unshift到这个数组

// 4. 把最新的评论列表数组,再次调用 JSON.stringify 转为 数组字符串,然后调用 localStorage.setItem()存储起来

//5. 评论之后,把评论人、评论内容置空

//6. 调用父组件传递的方法,向父组件传值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
  <style>
  .box{
    padding: 20px;
  }
  </style>
</head>

<body>
  <div id="app" class="box">
    <cmt-box @func="loadComments"></cmt-box>
    <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="item.id">
        <span class="badge">评论人: {{ item.user }}</span>
        {{ item.content }}
      </li>
    </ul>
  </div>
  <!-- 和父组件平级放置,独立于app -->
  <template id="tmpl">
    <div>
      <div class="form-group">
        <label>评论人:</label>
        <input type="text" class="form-control" v-model="user">
      </div>
      <div class="form-group">
        <label>评论内容:</label>
        <textarea class="form-control" v-model="content"></textarea>
      </div>
      <div class="form-group">
        <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
      </div>
    </div>
  </template>
  <script>
    var commentBox = {
      data() {
        return {
          user: '',
          content: ''
        }
      },
      template: '#tmpl',
      methods: {
        postComment() { // 发表评论的方法
          var comment = { id: Date.now(), user: this.user, content: this.content }
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          list.unshift(comment)
          localStorage.setItem('cmts', JSON.stringify(list))
          this.user = this.content = ''
          this.$emit('func')
        }
      }
    }

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: []
      },
      created(){
        this.loadComments()
      },
      methods: {
        loadComments() { // 从本地的 localStorage 中,加载评论列表
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
        }
      },
      components: {
        'cmt-box': commentBox
      }
    });
  </script>
</body>

</html>

 

 

 

<think>嗯,用户想用Flask 3、Vue 3和PostgreSQL搭建一个前后端分离的个人博客,实现登录功能和博文的增删改查。首先,我需要确定用户的技术水平,可能是一个有一定开发经验的人,但可能对全栈项目结构不太熟悉。接下来,我需要分步骤规划前后端的结构,以及数据库的设计。 首先,后端部分用Flask。需要设置RESTful API,处理用户认证和博客文章的操作。用户登录功能需要考虑JWT认证,因为前后端分离,无法使用session。所以,需要安装flask-jwt-extended之类的库。然后,设计用户模型和文章模型,用SQLAlchemy来操作PostgreSQL数据库。用户表需要用户名和密码,密码要哈希存储,用werkzeug的security模块。文章表需要标题、内容、作者ID和时间戳。 然后,前端用Vue 3,可能需要vue-router和vuex来管理路由和状态。axios用于发送请求到后端。需要创建登录页面,以及博文的列表、详情、编辑页面。登录后,前端需要保存token,之后的请求都要带上Authorization头。 接下来,考虑API接口的设计。用户注册和登录的端点,比如/api/auth/register和/api/auth/login。文章的CRUD接口,比如/api/articles,GET获取列表,POST创建,PUT和DELETE处理修改和删除。需要检查用户权限,比如修改或删除文章时,确保当前用户是作者。 数据库方面,PostgreSQL的表结构,用户表有id、username、password_hash,文章表有id、title、content、user_id、created_at。用外键关联用户和文章。 然后,前后端的交互细节。跨域问题,Flask需要配置CORS。前端axios实例设置baseURL,请求拦截器添加token。处理响应拦截,比如401错误跳转到登录页面。 可能遇到的难点包括JWT的刷新机制,如何处理token过期,前端路由守卫,检查登录状态。还有表单验证,后端的数据校验,比如文章标题不能为空,内容长度限制等。 测试方面,可以用Postman测试后端接口,确保各个端点正常工作。前端开发时,可以先模拟数据,再连接真实API。部署的话,可能需要Nginx反向代理,或者用Docker容器化。 用户可能需要详细的步骤,比如安装哪些依赖,代码示例,配置数据库连接。要确保步骤清晰,避免遗漏关键点,比如环境变量的设置(数据库URL,JWT密钥)。另外,安全方面,提醒用户不要暴露敏感信息,使用环境变量或配置文件。 总结下来,应该分部分讲解:项目结构、后端实现、前端实现、运行和测试。每个部分给出关键代码示例,并解释注意事项,比如密码哈希、JWT保护的路由、Vue组件的结构等。</think>下面我将为您介绍如何使用 Flask 3 + Vue 3 + PostgreSQL 实现一个前后端分离的个人博客系统,包含登录认证和博文管理功能: --- ### 一、系统架构设计 ``` 项目结构 ├── backend(Flask) │ ├── app.py │ ├── models.py │ ├── requirements.txt │ ├── config.py ├── frontend(Vue3) │ ├── src │ │ ├── views/ │ │ ├── components/ │ │ ├── router/ │ │ ├── store/ ``` --- ### 二、后端实现(Flask) #### 1. 依赖安装 ```bash pip install flask flask-sqlalchemy flask-jwt-extended psycopg2-binary flask-cors ``` #### 2. 数据库模型(models.py) ```python from flask_sqlalchemy import SQLAlchemy from werkzeug.security import generate_password_hash, check_password_hash db = SQLAlchemy() class User(db.Model): id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(80), unique=True, nullable=False) password_hash = db.Column(db.String(128)) def set_password(self, password): self.password_hash = generate_password_hash(password) class Article(db.Model): id = db.Column(db.Integer, primary_key=True) title = db.Column(db.String(100)) content = db.Column(db.Text) user_id = db.Column(db.Integer, db.ForeignKey('user.id')) created_at = db.Column(db.DateTime, default=datetime.utcnow) ``` #### 3. 核心API(app.py) ```python from flask_jwt_extended import create_access_token, jwt_required, get_jwt_identity @app.route('/api/login', methods=['POST']) def login(): data = request.get_json() user = User.query.filter_by(username=data['username']).first() if user and check_password_hash(user.password_hash, data['password']): access_token = create_access_token(identity=user.id) return {'token': access_token}, 200 return {'error': 'Invalid credentials'}, 401 @app.route('/api/articles', methods=['GET']) @jwt_required() def get_articles(): user_id = get_jwt_identity() articles = Article.query.filter_by(user_id=user_id).all() return jsonify([{ 'id': a.id, 'title': a.title, 'content': a.content, 'created_at': a.created_at.isoformat() } for a in articles]) # 其他接口:创建/修改/删除文章(类似结构) ``` --- ### 三、前端实现Vue3) #### 1. 安装依赖 ```bash npm install axios vue-router pinia @vueuse/core ``` #### 2. 核心功能实现 ```vue <!-- Login.vue --> <script setup> import { ref } from 'vue' import { useAuthStore } from '@/stores/auth' const auth = useAuthStore() const form = ref({ username: '', password: '' }) const handleLogin = async () => { await auth.login(form.value) } </script> ``` ```javascript // api.js import axios from 'axios' const api = axios.create({ baseURL: 'http://localhost:5000/api', headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` } }) export const getArticles = () => api.get('/articles') export const createArticle = (data) => api.post('/articles', data) ``` --- ### 四、关键功能实现 #### 1. 登录认证流程 - 前端存储JWT到localStorage - axios拦截器自动添加Authorization头 - 路由守卫验证登录状态 #### 2. 博文管理功能 - 文章列表页:显示所有文章(带分页) - 编辑器页面:Markdown编辑器集成 - 文章详情页:展示完整内容 - 权限控制:只能修改/删除自己的文章 --- ### 五、PostgreSQL配置 ```python # config.py class Config: SQLALCHEMY_DATABASE_URI = 'postgresql://user:password@localhost/blog_db' JWT_SECRET_KEY = 'your-secret-key-here' SQLALCHEMY_TRACK_MODIFICATIONS = False ``` --- ### 六、运行步骤 1. 创建PostgreSQL数据库 ```sql CREATE DATABASE blog_db; ``` 2. 启动Flask后端 ```bash flask --app app.py run ``` 3. 启动Vue前端 ```bash npm run dev ``` --- ### 七、扩展建议 1. 添加文章分类/标签功能 2. 实现文件上传(封面图片) 3. 增加评论系统 4. 部署到云服务器(Docker容器化) 5. 添加单元测试 这个方案实现了前后端完全分离,利用JWT进行认证,遵循RESTful API设计规范。前端可以使用Element Plus或Ant Design Vue组件库快速搭建界面,后端使用Flask-RESTful可进一步规范API设计。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佛佛ง

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值