群主,在执行gulp后报错,问题可能性缩小到gulpfile.js文件中 .webpack('app.js') 部分
如果删除这部分,命令行运行正常,浏览器控制台也不会出现任何错误提示
声明,近几次的反复尝试,没有添加任何样式合并文件。
其中 resources/assets/js/app.js应该是vue自带的js文件,之前的错误和当下的错误应该都是由它引起的,但不知道为什么群主视频中却没有这样的错误出现?
组件里的确有个字符的问题,改后,组件使用正常。
虽然组件使用正常了,但是前天遇到 的报错又在控制台里出现了??
Laravel和前端那些事 视频里面没有遇到这种问题
报错如下:
app.js:164 [Vue warn]: Error compiling template:
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="http://www.zt.com">
Laravel
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
lg23 <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="http://www.zt.com/logout" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="http://www.zt.com/logout" method="POST" style="display: none;">
<input type="hidden" name="_token" value="7lDAmYX8rUc1F2wwUN9DT6IMKs8rq6vzu1JtL0MI">
</form>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- 配置文件 -->
<script type="text/javascript" src="http://www.zt.com/vendor/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="http://www.zt.com/vendor/ueditor/ueditor.all.js"></script>
<script>
window.UEDITOR_CONFIG.serverUrl = '/ueditor/server'
</script><div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">
为什么你总是让我失望
<a class="topic pull-right" href="/topic/1">php</a>
<a class="topic pull-right" href="/topic/19">Route</a>
</div>
<div class="panel-body content">
<p>现在社会压力大,科技智能让人何去何从,科技发展对人类真的有益。</p>
</div>
<div class="edit-actions">
<span class="edif"><a href="/questions/7/edit">编 辑</a></span>
<form action="/questions/7" method="post" class="delete-form">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="7lDAmYX8rUc1F2wwUN9DT6IMKs8rq6vzu1JtL0MI">
<button class="button is-naked delete-button">删 除</button>
</form>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading question-follow">
<h2>1</h2>
<span>关注者</span>
</div>
<div class="panel-body">
<!-- <a href="/question/7/follow" class="btn btn-default btn-success">
已关注
</a>
-->
<question-follow-button></question-follow-button>
<a href="#editor" class="btn btn-primary">撰写答案</a>
</div>
</div>
</div>
<div class="col-md-8 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">
2个回复
</div>
<div class="panel-body">
<div class="media">
<div class="media-left">
<a href="">
<img class="top-margin" width="36" src="/images/avatart/user.png" alt="lg23">
</a>
</div>
<div class="media-body">
<h4 class="media-heading top-margin">
<a href="/user/lg23">
lg23
</a>
</h4>
<p>除了努力,还是努力!</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="">
<img class="top-margin" width="36" src="/images/avatart/user.png" alt="lg23">
</a>
</div>
<div class="media-body">
<h4 class="media-heading top-margin">
<a href="/user/lg23">
lg23
</a>
</h4>
<p>镇妮同学,你为什么老是口事心非???</p>
</div>
</div>
<form action="/questions/7/answer" method="post">
<input type="hidden" name="_token" value="7lDAmYX8rUc1F2wwUN9DT6IMKs8rq6vzu1JtL0MI">
<div class="form-group">
<!-- 编辑器容器 -->
<!-- 非转义可能引起攻击,需要过滤 -->
<script id="container" name="body" type="text/plain" style="height:120px;">
</script>
</div>
<button class="btn btn-success pull-right" type="submit">提交回复</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
(found in <Root>)warncompileToFunctionsVue$3.$mountVue._initVue$3(anonymous function)(anonymous function) @ app.js:164__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
没发现哪里写的不对?目前就是不确定是不是es6语法引起的?
你这里的command 什么意思
视频中操作两大部分:
1、调入es6语法
2、编辑和注册组件
最后执行 gulp
创建组件
<template>
<button
class="btn btn-default"
v-text="text"
></button>
</template>
<script>
export default {
mounted() {
this.$http.post('/api/question/follower',{})
.then(response=>{
console.log(response.data);
})
},
data() {
return {
followed: false
}
},
computed: {
text() {
return this.followed ? '已关注' :'关注该问题'
}
}
}
</script>
注册组件
require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
Vue.component('question-follow-button', require('./components/QuestionFollowButton.vue'));
const app = new Vue({
el: '#app'
});
gulpfile.js 在phpStrom里提示错误
elixir((mix) => {
mix.sass('app.scss')
.webpack('app.js');
});
这里我添加 button 组件,但是没有显示show视图里没有显示这个按钮
另外,组件已经注册 执行了gulp ,代码中也没有任何错误提示?
好像执行gulp时有报错,这个报错看不懂??
[22:34:49] Using gulpfile F:\vagrant\lnmp\zt360\admin\gulpfile.js
[22:34:49] Starting 'all'...
[22:34:49] Starting 'sass'...
[22:34:57] Finished 'sass' after 7.51 s
[22:34:57] Starting 'webpack'...
{ [Error: ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./ resources/assets/js/components/QuestionFollowButton.vue
Module build failed: SyntaxError: Unexpected token (18:27)
at Parser.pp$4.raise (F:\vagrant\lnmp\zt360\admin\node_modules\buble\node_mo dules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (F:\vagrant\lnmp\zt360\admin\node_modules\buble\node _modules\acorn\dist\acorn.js:603:10)
at Parser.pp.expect (F:\vagrant\lnmp\zt360\admin\node_modules\buble\node_mod ules\acorn\dist\acorn.js:597:28)
at Parser.parseObj (F:\vagrant\lnmp\zt360\admin\node_modules\buble\dist\bubl e.umd.js:727:18)
at Parser.pp$3.parseExprAtom (F:\vagrant\lnmp\zt360\admin\node_modules\buble \node_modules\acorn\dist\acorn.js:1805:19)
at Parser.parseExprAtom (F:\vagrant\lnmp\zt360\admin\node_modules\buble\dist \buble.umd.js:656:26)
at Parser.pp$3.parseExprSubscripts (F:\vagrant\lnmp\zt360\admin\node_modules \buble\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (F:\vagrant\lnmp\zt360\admin\node_modules\bub le\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (F:\vagrant\lnmp\zt360\admin\node_modules\buble\ node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (F:\vagrant\lnmp\zt360\admin\node_modul es\buble\node_modules\acorn\dist\acorn.js:1620:21)
@ ./resources/assets/js/components/QuestionFollowButton.vue 5:18-114
@ ./resources/assets/js/app.js]
message: './~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0! ./resources/assets/js/components/QuestionFollowButton.vue\nModule build failed: SyntaxError: Unexpected token (18:27)\n at Parser.pp$4.raise (F:\\vagrant\\ln mp\\zt360\\admin\\node_modules\\buble\\node_modules\\acorn\\dist\\acorn.js:2221: 15)\n at Parser.pp.unexpected (F:\\vagrant\\lnmp\\zt360\\admin\\node_modules\ \buble\\node_modules\\acorn\\dist\\acorn.js:603:10)\n at Parser.pp.expect (F: \\vagrant\\lnmp\\zt360\\admin\\node_modules\\buble\\node_modules\\acorn\\dist\\a corn.js:597:28)\n at Parser.parseObj (F:\\vagrant\\lnmp\\zt360\\admin\\node_m odules\\buble\\dist\\buble.umd.js:727:18)\n at Parser.pp$3.parseExprAtom (F:\ \vagrant\\lnmp\\zt360\\admin\\node_modules\\buble\\node_modules\\acorn\\dist\\ac orn.js:1805:19)\n at Parser.parseExprAtom (F:\\vagrant\\lnmp\\zt360\\admin\\n ode_modules\\buble\\dist\\buble.umd.js:656:26)\n at Parser.pp$3.parseExprSubs cripts (F:\\vagrant\\lnmp\\zt360\\admin\\node_modules\\buble\\node_modules\\acor n\\dist\\acorn.js:1715:21)\n at Parser.pp$3.parseMaybeUnary (F:\\vagrant\\lnm p\\zt360\\admin\\node_modules\\buble\\node_modules\\acorn\\dist\\acorn.js:1692:1 9)\n at Parser.pp$3.parseExprOps (F:\\vagrant\\lnmp\\zt360\\admin\\node_modul es\\buble\\node_modules\\acorn\\dist\\acorn.js:1637:21)\n at Parser.pp$3.pars eMaybeConditional (F:\\vagrant\\lnmp\\zt360\\admin\\node_modules\\buble\\node_mo dules\\acorn\\dist\\acorn.js:1620:21)\n @ ./resources/assets/js/components/Quest ionFollowButton.vue 5:18-114\n @ ./resources/assets/js/app.js',
showStack: false,
showProperties: true,
plugin: 'webpack-stream',
__safety: { toString: [Function: bound ] } }
另外视频中调出es6语法的快捷键是什么?
这里用Repository模式, 同我之前用的service+store层差不多,我原来的service层专门处理代码逻辑,store执行数据库操作
public function topics()
{
return $this->belongsToMany('App\Models\Topic')->withTimestamps();
}
这里有问题,我至于具体是哪?我也不知道,我从文档中复制了这句就对了?
当然 Topic::calss 也是正确的
Question::where('id',$id)->first();
这 样是没有问题的
其实很多东西我都学过,只是理解不深刻或是没记住。我会抓紧时间看群主的视频,比我以前学习的例子好很多。
http://www.zt.com/questions/2
浏览器输入上面内容时,出现下面报错:
Call to undefined relationship [topics] on model [App\Models\Question].
检查控制器及model没发现问题
Question model
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Question extends Model
{
protected $fillable = ['title', 'body', 'user_id'];
/**
* 定义多对多关系
*/
public function topics()
{
return $this->belogsToMany(Topic::class)->withTimestamps();
}
}
QuestionsController 控制器
public function show($id)
{
// 使用 with 方法指定想要预载入的关联对象 预载入可以大大提高程序的性能
// 这里的 topics 是App\Models\Question 中的 topics 的方法
$question = Question::where('id',$id)->with('topics')->get();
// compact 创建一个包含变量名和它们的值的数组
return view('questions.show',compact('question'));
}
你这里如果没有从后台返回数据,前端用户输入的数据会生成话题吗?我这里从后台返回话题数据正常,但生成话题却不行?
我基础差,有很多不足,我目前想先按自己基础水平跟着实战项目走遍,然后记录下所有的问题,这样子我觉得学习会更直接全面些。很多时候都是盲目在学,也不了解实际运用。多有烦扰,请见谅!