随笔分类 - Vue.js
摘要：实现重置密码逻辑：用户输入邮箱，点击发送重置邮件到本邮箱按钮，然后后端检测成功后，发送重置邮件给该邮箱。后端响应一个已发送邮件信息给用户。后端部分：api.php中添加route：新建这个PasswordResetController及添加create方法：执行：php artisan make:controller PasswordResetController用一个类来记录重置的请求信息，创建...
阅读全文
摘要：Likes PolyMorphic Relationship这个原教程的likes 其实可以就在post user topic 之间写非多态模型关联。为了示例，写这个多态的关联；一般情况下可以不这么写。更多可以参考：https://laravel.com/docs/7.x/eloquent-relationships#polymorphic-relationships逻辑上原教程就是把likes当...
阅读全文
摘要：Topic Update首先更新api.php添加一个routeTopicController.php增加这个update方法。update方法需要一个Request参数，直接用custom request 来处理，这样字段验证也方便。执行：php artisan make:request TopicUpdateRequest 'required|string|max:255', ]...
阅读全文
摘要：Moving to CRUDTopic Model and Post Model Migration执行：php artisan make:model Topic -mphp artisan make:model Post -mid(); $table->string('title'); $table->unsignedBigInteger('user_...
阅读全文
摘要：Middleware Clear Validation即点击登录，如果错误并出现了错误提示：再点击切换其他页面再切换回来的时候，错误提示还存在。所以需要用middleware 在页面切换了之后 clear掉这个validation errors信息。新建 middleware/clearValidationErrors.jsexport default function ({store}) { ...
阅读全文
摘要：Global Vuex Validation截至目前，注册，登录的输入验证还没有实现，所以继续：新建store/validation.jsexport const state = () => ({ errors: []})//gettersexport const getters = { errors(state) { return state.errors; }}//mutation...
阅读全文
摘要：Nuxt Auth Setup参考 https://auth.nuxtjs.org/#getting-started执行：npm install @nuxtjs/auth @nuxtjs/axiosnuxt.config.js修改：export default { mode: 'universal', /* ** Headers of the page */ head: { ti...
阅读全文
摘要：Setup Laravel JWT Authenticationhttps://jwt-auth.readthedocs.io/en/docs/laravel-installation/https://appdividend.com/2018/02/24/laravel-jwt-authentication-tutorial/https://blog.pusher.com/laravel-jwt/...
阅读全文
摘要：IntroLaravel SetUp新建一个Laravel Application，命名为backend用laragon新建laravel的教程 ： https://www.cnblogs.com/dzkjz/p/12361718.htmlenv配置数据库设置。删除Controllers/Auth文件夹 如果有的话，因为需要从头定义auth的逻辑。删除welcome.blade.php ，清空a...
阅读全文
摘要：Deploy Static Site to Firebase Hosting官方文档： https://nuxtjs.org/guide/commands先示例 https://nuxtjs.org/guide/commands#static-generated-deployment-pre-rendered-需要注意的是，静态站点不能使用nuxtServerInit方法，所以，store/ind...
阅读全文
摘要：Installing and Using Plugins安装一个 vue scrollto 插件，主要是在底部增加一个滚动到顶部的按钮。要能够支持双端渲染的。执行：npm install vue-scrollto记得安装完成后执行npm run dev新建plugins/scrollto.js文件：import Vue from 'vue';import VueScrollTo from 'vue...
阅读全文
摘要：Vuex StoreLoading Image From Assets Folder下载一张图片到static文件夹内：修改assets/styles/main.css:body { background-color: azure;}div.jumbotron { border-radius: 0; background-image: url("/cbimage.jpg"); height...
阅读全文
摘要：Nuxt Child Component新建pages/users.vue文件，即与users文件夹相同层级且与users文件夹同名。代码如下：注意nuxt-child You can see me in all users related pages 结构如下：users文件夹中所有的与users相关的页面都在nuxt-child中渲染。打开：http://localhos...
阅读全文
摘要：layouts/default中的nuxt标签作为nuxt的插槽，pages/index.vue会渲染至此。新建pages/users.vueroute自动处理好了【必须有执行npm run dev】，打开 http://localhost:3000/users 即可看到页面结果。view page source因为：.nuxt/router.js中已经自动生成好了》》》Creating Nest...
阅读全文
摘要：安装Node.js,然后执行：npm install -g @vue-cli 安装vue-cli安装Nuxt.js【看官方文档】https://nuxtjs.org/guide/installation/新建一个文件夹：D:\nuxt ，文件夹内右键选择Terminal打开命令窗口：执行：npx create-nuxt-app learning然后：UI暂时不选择暂时不选择axios 都暂时不选择...
阅读全文
摘要：Main Topics:从上到下，从左至右。SSR->Nuxt->Deploy->Backend->Auth->…->ValidationNuxt.js:Vue.js基础之上的。 SPA page source一般是这样：所有的content在page source中是看不到的，搜索引擎爬取网站的时候，爬取的数据只有一个div#app，有的会缓一段时间等待render，对seo都不友好。其次，ro...
阅读全文
摘要：应用层级的状态应该集中到单个 store 对象中。提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。异步逻辑都应该封装到 action 里面。只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：├── in...
阅读全文
摘要：Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... }}const moduleB...
阅读全文
摘要：Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。Action 函数接受一个 context 对象【与 store 实例具有相同方法和属性】context 对象不是 store 实例本身你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 co...
阅读全文
摘要：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 变更...
阅读全文
浙公网安备 33010602011771号