随笔分类 - Nuxt
摘要：参考https://dev.to/frontendfoxes/dockerise-your-nuxt-ssr-app-like-a-boss-a-true-vue-vixens-story-4mm6docker-compose.ymlversion: "3"services: nuxt: build: ./app/ container_name: vuevixens-websi...
阅读全文
摘要：参考 https://nuxtjs.org/guide/commands/#single-page-application-deployment-spa-SSR模式虽然有很好的SEO支持【服务端预渲染】，但是由于我们网站的内容是基于实时API，部分也基于user authentication的，所以采用SPA方式发布。 大部分内容都是固定的，只是数据来源是API获取。采用SSR模式，并且开始h...
阅读全文
摘要：参考 https://dev.auth.nuxtjs.org/providers/laravel-jwt.html配置后发现不可用 然后打开https://auth.nuxtjs.org/ 却找不到上述配置了 于是只能做了两个auth strategyexport default { modules: [ // Doc: https://axios.nuxtjs.org/usage ...
阅读全文
摘要：实现重置密码逻辑：用户输入邮箱，点击发送重置邮件到本邮箱按钮，然后后端检测成功后，发送重置邮件给该邮箱。后端响应一个已发送邮件信息给用户。后端部分：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...
阅读全文
摘要：安装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...
阅读全文
浙公网安备 33010602011771号